微信小程序scroll-view组件设置 scroll-top无效问题解决

微信小程序官方提供了一个可以设置滚动条位置的方法scroll-top
微信小程序scroll-view组件设置 scroll-top无效问题解决_第1张图片
在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。

这里演示一个切换选项重置滚动条事件的案例:

    <scroll-view class="listDetail" 
      scroll-y="true"
      bindscrolltolower="scrollLower" 
      scroll-top="{{scrollTop}}"
      >
      <view class="allDetail">view>
    scroll-view>
  data: {
    // data内不需要设置scrollTop
  },
  // 将scrollTop放在一个事件内执行,切换页面重置滚动条
    navTabClick() {
    this.setData({
      scrollTop: 0
    })
  },

注意:
这种在data内直接设置scrollTop初始化是无法生效的

    <scroll-view class="listDetail" 
      scroll-y="true"
      bindscrolltolower="scrollLower" 
      scroll-top="{{scrollTop}}"
      >
      <view class="allDetail">view>
    scroll-view>
  data: {
        scrollTop : 0
    }

你可能感兴趣的:(原生微信小程序,微信小程序,小程序)