小程序返回顶部top滚动

wxjs

const app = getApp();
Page({
   data:{
        // top标签显示(默认不显示)
        backTopValue:false
  },
  // 监听滚动条坐标
  onPageScroll: function (e) {
    //console.log(e)
    var that = this
    var scrollTop = e.scrollTop
    var backTopValue = scrollTop > 500 ? true : false
    that.setData({
      backTopValue: backTopValue
    })
  },

  // 滚动到顶部
  backTop:function(){
    // 控制滚动
      wx.pageScrollTo({
        scrollTop: 0
      })
  },

})

wxss

/*浮窗返回顶部*/
.backTop{width: 60rpx; height:60rpx;background: #fff;position: fixed; right: 20rpx ; bottom: 130rpx; border-radius: 30rpx;box-shadow: 0px 0px 3px #000; line-height: 60rpx; text-align: center}
.backTop text{font-size: 45rpx; }

wxml

<!--浮窗 Top-->
<view class="backTop" bindtap=‘backTop‘ wx:if="{{backTopValue ==true}}"><text class=‘iconfont icon-top li-ico‘></text></view>

效果:滚动到一定距离后显示Top样式

原文地址:https://www.cnblogs.com/wesky/p/9067069.html

时间: 2024-08-28 01:20:39

小程序返回顶部top滚动的相关文章

微信小程序自定义顶部导航demo

注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1.全局顶部导航自定义,在app.json的“window”里添加"navigationStyle": "custom" 2.只在某一个页面自定义顶部导航,在该页面的json文件里添加"navigationStyle": "custom&qu

微信小程序之x轴滚动

10.1快乐 微信小程序之x轴滚动 具体请参考: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html   原文地址:https://www.cnblogs.com/home-/p/11607078.html

jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo,当文档高度大于窗口高度时,返回顶部按钮显示,否则隐藏. 具体代码见下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

微信小程序返回上一页传参并刷新

问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页.很好理解,因为在当前页停止了,肯定是最后一个 //获取页面栈 let page

小程序返回上一级页面背景音乐报错 setBackgroundAudioState:fail title is nil!;

小程序初始化在onLoad的时候加载了一次背景音乐. 如果此时报错是title必传.如果没有 会报错一次 setBackgroundAudioState:fail title is nil!; 这个都知道 但同时我们可能有这样的一个情况 我再A页面. 播放了背景音乐 然后跳到B页面.修改了某些音乐参数 再调回A页面的时候报错了 解决: 在request的回调里面设置一次. 我尝试过在外面.在onShow设置.都没用,只有在success的回调的时候才会触发 原文地址:https://www.cn

博客园页面添加返回顶部TOP按钮

1. 进入网页管理->设置 2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 #back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; } 3. 在"页脚Html代码&q

网页常用的小工具--返回顶部

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 5 <meta charset="UTF-8" /> 6 <title>top</title> 7 <meta name="keywords" cont

微信小程序返回页面传值

一.通过url传递参数,但由于navigateTo无法跳转到导航页,所以无法往导航页传递参数 wx.navigateTo({ url: 'test?id=1' }) 二.通过wx.navigateBack返回,但此法不能直接传递参数,通过直接修改上一页data中某个参数值来达到传递参数的效果 let pages = getCurrentPages(); //当前页面 let prevPage = pages[pages.length - 2]; //上一页面 prevPage.setData({