image.png
点击返回组件的按钮，返回至页面顶部。
按照之前讲的组件创建步骤，创建组件
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
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
backTop(){
this.triggerEvent('backTop')
}
}
})
json:
{
"component":true
}
调用页面：
<i-top
backTopValue="{{backTopValue}}"
bind:backTop="backTop"
></i-top>
// 监听滚动条坐标
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"
}
}
