我们先清楚为什么要使用scroll-view?
在做回到顶部时,需要拿到实时的滚动距离,这时候就得使用上scroll-view了
记录一次在做 微信小程序开发时,在没有使用scroll-view的时候,我们使用vant-sticky做吸顶效果的时候可以正常使用。
但是当我们使用scroll-view时,突然发现吸顶失效了
我们可以看到Vant Weapp也是非常的细心,帮我们做了解答
通过 scroll-top
与 offset-top
属性可以实现在 scroll-view 内嵌套使用。
<scroll-view
bind:scroll="onScroll"
scroll-y
id="scroller"
style="height: 200px;"
>
<view style="height: 400px; padding-top: 50px;">
<van-sticky scroll-top="{
{ scrollTop }}" offset-top="{
{ offsetTop }}">
<van-button type="warning">嵌套在 scroll-view 内</van-button>
</van-sticky>
</view>
</scroll-view>
Page({
data: {
scrollTop: 0,
offsetTop: 0,
},
onScroll(event) {
wx.createSelectorQuery()
.select('#scroller')
.boundingClientRect((res) => {
this.setData({
scrollTop: event.detail.scrollTop,
offsetTop: res.top,
});
})
.exec();
},
});
你可能有点看不懂一些属性是干嘛的,你只需要这样使用即可:
使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
//scroll-view需要有高度.....
<scroll-view bind:scroll="onScroll" scroll-y>
<view>
<van-sticky scroll-top="{
{ scrollTop }}" offset-top="{
{ offsetTop }}">
//需要吸顶的内容
</van-sticky>
</view>
</scroll-view>
Page({
data: {
scrollTop: 0,
offsetTop: 0,
},
onScroll(event) {
this.setData({
scrollTop: event.detail.scrollTop
});
},
});
好了,是不是非常简单,有任何问题欢迎下方评论