微信小程序使用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
      });
  },
});

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值