微信小程序 scrollView之scroll-into-view跳坑

最新推荐文章于 2024-09-10 12:33:45 发布

暖一杯茶

最新推荐文章于 2024-09-10 12:33:45 发布

阅读量1.2k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_44932450/article/details/115505185

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用scroll-view来进行锚点跳转的赎时候发现scroll-view的scroll-into-view有问题
需求是滑动一定的距离让导航固定并进行锚点跳转

<view class="topnavFixed{ 'topnavFixed' ? tabShow : '' " wx:if="{{tabShow}}">
    <van-button class="'title' {{toViewid == 'a1' ? 'active' : ''}}  " type="primary" bindtap='jumpTo' data-opt="a1">商品
    </van-button>
    <van-button class="'title' {{toViewid == 'a2' ? 'active' : ''}} " type="primary" bindtap='jumpTo' data-opt="a2">详情
    </van-button>
    <van-button class="'title' {{toViewid == 'a3' ? 'active' : ''}} " type="primary" bindtap='jumpTo' data-opt="a3">评价
    </van-button>
  </view>

<scroll-view scroll-into-view="{{toViewid}}" scroll-y="true" scroll-with-animation="true" bindtouchstart='onPageScroll'>
	要滑动的内容放在这里-------
	<view id="a1">商品信息</view>
	<view id="a2">详情信息</view>
	<view id="a3">评论信息</view>
</scroll-view>

另：
锚点点击跳转

  jumpTo: function (e) {
    let myid = e.currentTarget.dataset.opt;
    this.setData({
      toViewid: myid
    });
  },

小程序间提供屏幕滑动事件

onPageScroll(ev) {
    let that = this;
    let top = ev.scrollTop || ev.target.offsetTop ;
    if (top <= 0) {
      top = 0;
    } else if (top > wx.getSystemInfoSync().windowHeight) {
      top = wx.getSystemInfoSync().windowHeight;
    }
    if (top >50) {  //根据自己的足球来进行判断
      that.setData({
        tabShow: true
      })
    } else {
      that.setData({
        tabShow: false
      })
    }
    setTimeout(function () {
      that.setData({
        scrollTop: top
      })
    }, 0)
  },

这是商品详情页面不能设置固定的高度，设置scroll-view的高度为100%不能进行锚点跳转，后转变为scroll-view的高度为100vh就可以进行锚点跳转了。
scroll-view 必须有固定的高度，如果设置高度为百分比的话，父容器一定要固定高度，否则无效。比如最顶层的 view 没有设置固定高度，然后在下面添加的 scroll-view 的高度就直接设置height:100%是无效的，此时可以设置为height:100vh代替。