小程序-返回顶部组件

Posted 2020-12-08 东血

原理

• 设置自定义组件前都先在父层运行成功，再行改造
• 判断是否在顶部，就是何时显示返回顶部图片（父js）
• 搞定返回顶部按钮样式（子wxml,子wxss）
• 给按钮绑定返回顶部事件(子js)

设计父层

父层wxml

判断是否在顶部

<w-back-top wx:if="{{showBackTop}}"/>

父层js

onPageScroll（）监听页面滚动，设置上界和下界

const TOP_DISTANCEzero = 200;
const TOP_DISTANCEone = 640;
Page({
    /**
    * 页面的初始数据
    */
    data: {
        showBackTop: false
    },
    onPageScroll: function (options) {
        //取出scrollTop
        const scrollTop = options.scrollTop;
        //修改showBackTop属性
        this.setData({
        showBackTop: scrollTop >= TOP_DISTANCEzero
        })
    }
})

设计子层

子层wxml

<view class="back-top" bindtap="handleBackTop">
    <image src="../../assets/returntop.png" />
</view>

子层wxss

.back-top{
    position: fixed;
    right: 10rpx;
    bottom: 10rpx;
}
.back-top image{
    width:100rpx;
    height: 100rpx;
}

子层js

Component({
    /**
    * 组件的方法列表
    */
    methods: {
        handleBackTop(){
            console.log("回到顶部点击成功")
            wx.pageScrollTo({
                scrollTop: 0,
            })
        }
    }
})