通过scroll-view 以及position:sticky实现小程序吸顶功能
正常展示：
image.png
吸顶展示：
image.png
实现代码：
js
Page({
onLoad() {
},
data: {
scrollEnabled: true,
isTriggered: false
},
handleRefresher(e) {
wx.showLoading({
title: '刷新中'
})
setTimeout(() => {
this.setData({
isTriggered: false
})
wx.showToast({
title: '加载完成'
})
}, 1500)
},
toUpper(e) {
console.log(e)
},
toLower(e) {
console.log(e)
}
})
wxml:
<scroll-view
scroll-y="{{scrollEnabled}}"
style="height: 100vh;"
refresher-triggered="{{isTriggered}}"
bindrefresherrefresh="handleRefresher"
refresher-enabled="true"
bindscrolltoupper="toUpper"
bindscrolltolower="toLower"
>
<view>
<view class="scroll-top"></view>
<view class="scroll-tab sticky"></view>
<view class="scroll-cont" wx:for="{{100}}" wx:key="index">content</view>
</view>
</scroll-view>
wxss:
.scroll-top {
height: 100rpx;
background: #59ac80;
}
.sticky{
position: sticky;
top:0
}
.scroll-tab{
width: 100%;
height: 80rpx;
background: #FF3F29;
}
.scroll-cont {
line-height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
text-align: center;
}
