小程序练习(1)

小程序中点击返回顶部的实现

wxml

      1
      2
      3
      4
      5
      6
      7
      8

// 返回顶部的按钮

wxss

// scroll的高度100%
scroll-view{
  width: 100%;
  height: 100%;  
}
// 给返回顶部的按钮加固定定位
 .arrow-up{
  position: fixed;
  right: 5%;
  bottom: 7%;
}

JS部分

data: {
    replay: false,
    // 竖向滚动条位置
    scrollTop: 0
  },
 // 先判断是滚动条的位置，来控制返回顶部按钮的显示状态
  scroll(e) {
    if(e.detail.deltaY<=0){
      this.setData({
          replay: true
      })
    }
  },
  top(e) {
    console.log(e)
    if(e.currentTarget.offsetTop===0){
      this.setData({
        replay: false
    })
    }
  },
  // 当点击返回顶部按钮时候让竖向滚动条位置scrollTop为0
  goTop() {
    this.setData({
      // 设置竖向滚动条位置为0
      scrollTop: 0
    })
  },