背景：
小程序的開發(fā)中會遇到很多通用的操作小按鈕卵沉，最常見的就是回頂部颠锉、回首頁、點(diǎn)贊史汗、收藏等琼掠。他們會分布于各種需要交互的頁面。在交互一致的情況下停撞，為了減少重復(fù)的代碼和后期維護(hù)瓷蛙，通常都會將它們抽成單獨(dú)的組件。分享個【回頂部】組件的簡單寫法戈毒，也是給自己做一個記錄艰猬。
開發(fā)步驟
- 新建一個goTop組件文件包，含小程序規(guī)范的幾個文件js/wxml/json
- 開發(fā)代碼埋市，在需要引用頁面的對應(yīng)配置文件中加入組件配置
- 在引用的wxml中加入組件代碼和傳參冠桃，js文件寫參數(shù)的交互
效果圖
代碼概覽
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
備注：因?yàn)槎鄠€模塊樣式一致，因此把樣式抽出去了,下圖只放出go-top部分~亦可單獨(dú)寫在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;
}
↓組件開發(fā)已經(jīng)完成道宅，接下去是組件的使用↓
1.demo.json
備注：usingComponents加入對應(yīng)組件配置即可
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "DemoTitle",
"usingComponents": {
"go-top": "/component/goTop/goTop"
}
}
2.demo.wxml
備注：showTop通過滾動事件觸發(fā)取值
<view>
<!-- S 其他業(yè)務(wù)代碼 -->
<!-- E 其他業(yè)務(wù)代碼 -->
<!-- 回頂部組件 -->
<go-top class="go-top" showTop="{{showTop}}"></go-top>
</view>
3.demo.js
備注：刪除了其他業(yè)務(wù)代碼食听，僅剩和回頂部組件相關(guān)的交互，便于閱讀污茵。onPageScroll是小程序開放出來的一個頁面事件樱报，用于監(jiān)聽頁面的滾動，但有一定的延時泞当。
Page({
data: {
showTop:false
},
onPageScroll(e){
//參數(shù)e會返回滾動條滾動的高度
if(e.scrollTop>1200){
this.setData({
showTop:true
})
}else{
this.setData({
showTop:false
})
}
}
})
其他說明:
以上代碼中樣式go-top我是寫在demo.wxml引用中的迹蛤，因?yàn)槠浯a寫在app.wxss里，如果是寫在goTop.wxss中則模塊樣式名直接寫在goTop.wxml的結(jié)構(gòu)中即可。app.wxss中的樣式和組件內(nèi)的樣式是獨(dú)立的笤受，不干擾不影響穷缤。如果樣式寫在外部，樣式名寫在內(nèi)部則不會生效箩兽！
通過該方式亦可擴(kuò)展多個右側(cè)懸浮按鈕，通過傳參控制其顯示與否章喉！
完...
