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

这篇具有很好参考价值的文章主要介绍了微信小程序使用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
      });
  },
});

好了，是不是非常简单，有任何问题欢迎下方评论文章来源地址https://www.toymoban.com/news/detail-483861.html

到了这里，关于微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！