image.png
點擊返回組件的按鈕，返回至頁面頂部。
按照之前講的組件創(chuàng)建步驟暖哨，創(chuàng)建組件
wxml:
<view wx:if="{{backTopValue}}"
class="back-top"
catchtap="backTop" >
<text>頂部</text>
</view>
wxss:
.back-top{
width: 100rpx;
height: 100rpx;
position: fixed;
background: white;
right: 40rpx;
bottom: 100rpx;
border-radius:50%;
box-shadow: 0px 0px 5px #f1f1f1;
line-height: 100rpx;
text-align: center
}
.back-top{
font-size: 14px;
color: #666;
}
js:
Component({
properties: {
backTopValue: {
type: Boolean,
value: false
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
backTop(){
this.triggerEvent('backTop')
}
}
})
json:
{
"component":true
}
調(diào)用頁面：
<i-top
backTopValue="{{backTopValue}}"
bind:backTop="backTop"
></i-top>
// 監(jiān)聽滾動條坐標(biāo)
onPageScroll: function (e) {
const that = this
let scrollTop = e.scrollTop
let backTopValue = scrollTop > 500 ? true : false
that.setData({
backTopValue
})
},
//返回頂部
backTop(){
wx.pageScrollTo({
scrollTop: 0,
})
}
json:
{
"usingComponents": {
"i-top":"/base/top/top"
}
}
