使用mpvue为微信小程序的列表页添加一键返回顶部的按钮

作者: Lynan 分类: Vue.js 发布时间: 2018-03-31 11:59

效果:


首先说一下思路:

  1. 在列表顶部不显示“返回顶部”
  2. 当页面滑到一定位置的时候显示“返回顶部”
  3. 继续往下滑依然显示“返回顶部”,但是往回滑回到列表头部时不显示“返回顶部”

实现方法:

  1. 为这个返回顶部绑定一个v-if属性(如果微信的语法则是wx:if),当值为true的时候即会显示这个“返回顶部”
  2. 监听滚动位置,当位置超过一定的值的时候把返回顶部按钮绑定的属性值设为true,反之设为false
  3. 当“放回顶部”按钮点击之后,设置绑定属性为false,隐藏这个按钮

操作步骤:

1.data()中添加:

showBackTop:false

2.HTML/WXML中添加“返回顶部按钮”并且绑定显示属性

回到顶部

3.CSS/WXSS中添加按钮样式

#backToTop{
  width: 30px;
  background-color: rgba(215,12,24,.5);
  color: white;
  padding: 12px 0 12px 5px;
  right: 0;
  position: fixed; //固定按钮在屏幕上的位置
  bottom: 2.5%;
  height: 94px;
  cursor: pointer;
  text-align: center;
  z-index: 20;
  border-radius: 12px 0 0 12px;
}

4.监听滚动位置:
在script标签内参考添加以下代码:其中onPageScroll是小程序的方法,它类似于watch,只不过是专门用来监测屏幕滚动事件

onPageScroll:function(e){
  console.log(e) //可以在控制台输出滚动位置,并且根据自己的需求决定在多少位置时显示”返回顶部“
    if(e.scrollTop >= 150){
       this.showBackTop = true //显示返回顶部按钮
    } else{
      this.showBackTop = false  //隐藏返回顶部按钮
    }
},
methods:{
  backToTop(){
      let _this = this
      wx.pageScrollTo({
        scrollTop: 0, //滚动到屏幕的目标位置
        duration: 300 //动画完成时间,值越小动画越快
      })
      _this.showBackTop = false  //点击”返回顶部“按钮之后隐藏这个按钮
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注