小程序-返回頂部組件

原理

• 設置自定義組件前都先在父層運行成功，再行改造
• 判斷是否在頂部，就是什麼時候顯示返回頂部圖片（父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,
            })
        }
    }
})