微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效

我们先清楚为什么要使用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
      });
  },
});

好了，是不是非常简单，有任何问题欢迎下方评论

扫描二维码关注公众号，回复： 14737789 查看本文章

微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效

猜你喜欢