【微信小程序】回顶部通用组件开发实践

背景：

小程序的开发中会遇到很多通用的操作小按钮，最常见的就是回顶部、回首页、点赞、收藏等。他们会分布于各种需要交互的页面。在交互一致的情况下，为了减少重复的代码和后期维护，通常都会将它们抽成单独的组件。分享个【回顶部】组件的简单写法，也是给自己做一个记录。

开发步骤

新建一个goTop组件文件包，含小程序规范的几个文件js/wxml/json

开发代码，在需要引用页面的对应配置文件中加入组件配置

在引用的wxml中加入组件代码和传参，js文件写参数的交互

效果图

回顶部效果图

代码概览

1.goTop / goTop.wxml
备注：go_top.png是一个白底的正方形图片

<!--回顶部-->
<view wx:if="{{showTop}}" catchtap="toTop">
  <image src="../../images/icons/go_top.png"></image>
</view>

2.goTop / goTop.json

{
  "component": true
}

3.goTop / goTop.js

Component({
  properties: {
    showTop: {
      type: Boolean,
      value: false
    }
  },
  data: {

  },
  methods:{
    // 回顶部事件
    toTop:function(){
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 500
      })
    }
  }
})

4.app.wxss
备注：因为多个模块样式一致，因此把样式抽出去了,下图只放出go-top部分~亦可单独写在goTop.wxss中

.go-top{
    position:fixed;
    right:28rpx;
    bottom:80rpx;
}
.go-top image{
    padding:16rpx;
    width:48rpx;
    height:48rpx;
    background:#fff;    
    border-radius:40rpx;
    box-shadow:0 4rpx 10rpx #707070;
}

↓组件开发已经完成，接下去是组件的使用↓

1.demo.json
备注：usingComponents加入对应组件配置即可

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "DemoTitle",
  "usingComponents": {
    "go-top": "/component/goTop/goTop"
  }
}

2.demo.wxml
备注：showTop通过滚动事件触发取值

<view>
    <!-- S 其他业务代码 -->
    <!-- E 其他业务代码 -->

    <!-- 回顶部组件 -->
    <go-top class="go-top" showTop="{{showTop}}"></go-top>
</view>

3.demo.js
备注：删除了其他业务代码，仅剩和回顶部组件相关的交互，便于阅读。onPageScroll是小程序开放出来的一个页面事件，用于监听页面的滚动，但有一定的延时。

Page({
  data: {
    showTop:false
  },
  onPageScroll(e){
    //参数e会返回滚动条滚动的高度
    if(e.scrollTop>1200){
      this.setData({
        showTop:true
      })
    }else{
      this.setData({
        showTop:false
      })
    }
  }
})

其他说明:
以上代码中样式go-top我是写在demo.wxml引用中的，因为其代码写在app.wxss里，如果是写在goTop.wxss中则模块样式名直接写在goTop.wxml的结构中即可。app.wxss中的样式和组件内的样式是独立的，不干扰不影响。如果样式写在外部，样式名写在内部则不会生效！

通过该方式亦可扩展多个右侧悬浮按钮，通过传参控制其显示与否！

完...

最后编辑于：2019.12.25 14:24:44