美文网首页
微信小程序scroll-view右侧内容定位失败-未滚动至相应位

微信小程序scroll-view右侧内容定位失败-未滚动至相应位

作者: LELIN | 来源:发表于2021-03-31 09:38 被阅读0次

场景:

左侧导航栏,右侧内容


image.png

右侧内容 .wxml 文件

<scroll-view  scroll-y="true" bindscroll="onContentChange" style="width: 100%; height: 100%" scroll-into-view="{{contentToView}}">
      <view wx:for="{{lists}}" wx:key="id">
        <view class="content_item" id="{{item.id}}">{{item.name}}</view>
      </view> 
</scroll-view>

右侧内容 .js 文件

lists: [
      {id: "m001", name: 'view-m001'},
      {id: "m002", name: 'view-m002'},
      {id: "m003", name: 'view-m003'},
      {id: "m004", name: 'view-m004'},
      {id: "m005", name: 'view-m005'},
      {id: "m006", name: 'view-m006'},
      {id: "m007", name: 'view-m007'},
]

注意点:

  • scroll-into-view="{{contentToView}}" 这是滚动指定的位置,主键id
  • for循环后的每一项一定要设置id, id须同contentToView值一致
image.png

相关文章

网友评论

      本文标题:微信小程序scroll-view右侧内容定位失败-未滚动至相应位

      本文链接:https://www.haomeiwen.com/subject/rsghhltx.html