当前位置:   article > 正文

微信小程序scroll-view动态加载数据滚动指定位置_微信小程序新增数据滚动scroll-view 局部刷新滚动

微信小程序新增数据滚动scroll-view 局部刷新滚动

要在微信小程序的scroll-view中实现动态加载数据并滚动到指定位置,你可以按照以下步骤进行操作:

1. 首先,在scroll-view组件中设置一个唯一的id,例如:

  1. <scroll-view id="myScrollView" scroll-y="true" style="height: 100vh;">
  2.   <!-- 动态加载的数据 -->
  3. </scroll-view>


2. 在页面的js文件中,定义一个变量来保存滚动位置,例如:

  1. Page({
  2.   data: {
  3.     scrollTop: 0
  4.   },
  5.   // 其他代码...
  6. })


3. 当需要加载新数据时,更新scroll-view中显示的数据,并将滚动位置设置为指定的位置,例如:

  1. Page({
  2.   data: {
  3.     scrollTop: 0
  4.   },
  5.   onLoad: function() {
  6.     // 加载初始数据
  7.     // ...
  8.   },
  9.   loadMoreData: function() {
  10.     // 动态加载更多数据
  11.     // ...
  12.     
  13.     // 更新scroll-view中的数据
  14.     this.setData({
  15.       // 更新数据...
  16.     },()=>{ // 设置滚动位置
  17. setTimeout(() => {
  18. this.setData({
  19. scrollTop: 600
  20. })
  21. }, 100); //这里运用了setData的第二个参数,
  22. //callback函数用于在setData时页面渲染后执行的函数
  23. //加上setTimeout来异步操作
  24. });
  25.   },
  26.   // 其他代码...
  27. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/321341
推荐阅读
相关标签
  

闽ICP备14008679号