【微信小程序】返回顶部组件

image.png

点击返回组件的按钮，返回至页面顶部。
按照之前讲的组件创建步骤，创建组件

wxml:
<view wx:if="{{backTopValue}}" 
  class="back-top"
  catchtap="backTop" >
  <text>顶部</text>
</view>

wxss:
.back-top{
  width: 100rpx;
  height: 100rpx; 
  position: fixed;
  background: white; 
  right: 40rpx; 
  bottom: 100rpx; 
  border-radius:50%;
  box-shadow: 0px 0px 5px #f1f1f1; 
  line-height: 100rpx; 
  text-align: center
}

.back-top{
  font-size: 14px;
  color: #666;
}

js:
Component({
  properties: {
    backTopValue: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    backTop(){
      this.triggerEvent('backTop')
    }
  }
})

json:
{
  "component":true
}

调用页面：

<i-top 
    backTopValue="{{backTopValue}}"
    bind:backTop="backTop"
  ></i-top>

// 监听滚动条坐标
  onPageScroll: function (e) {
    const that = this
    let scrollTop = e.scrollTop
    let backTopValue = scrollTop > 500 ? true : false
    that.setData({
      backTopValue
    })
  },

//返回顶部
  backTop(){
    wx.pageScrollTo({
      scrollTop: 0,
    })
  }

json:
{
  "usingComponents": {
    "i-top":"/base/top/top"
  }
}