美文网首页微信小程序开发微信小程序开发微信小程序
【微信小程序】回顶部通用组件开发实践

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

作者: Ever月亮 | 来源:发表于2019-12-19 11:26 被阅读0次
    背景:

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

    开发步骤
    • 新建一个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中的样式和组件内的样式是独立的,不干扰不影响。如果样式写在外部,样式名写在内部则不会生效!

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

    完...

    相关文章

      网友评论

        本文标题:【微信小程序】回顶部通用组件开发实践

        本文链接:https://www.haomeiwen.com/subject/fhhmnctx.html