Uniapp scroll-view 加载新数据后停留在原位置的实现方法
要实现scroll-view加载新数据后停留在原位置不变的效果,可以使用以下方法:\n\n1. 获取scroll-view滚动的位置scrollTop。\n\n2. 在数组拼接新数据之前,记录当前scrollTop的值。\n\n3. 拼接新数据到数组中。\n\n4. 使用setData更新数据,触发页面重新渲染。\n\n5. 在页面渲染完成后,使用wx.pageScrollTo()方法将scroll-view滚动到之前记录的scrollTop位置。\n\n以下是一个示例代码:\n\njavascript\n// 页面中定义data\ndata: {\n  listData: [], // 原数据数组\n  scrollTop: 0, // 滚动位置\n},\n\n// 拼接新数据并更新数据\naddData: function() {\n  var newData = [/* 新数据 */];\n  var scrollTop = this.data.scrollTop;\n  \n  // 拼接新数据到原数组\n  var newListData = this.data.listData.concat(newData);\n\n  // 更新数据\n  this.setData({\n    listData: newListData,\n  });\n\n  // 页面渲染完成后,滚动到之前的位置\n  wx.nextTick(function() {\n    wx.pageScrollTo({\n      scrollTop: scrollTop,\n      duration: 0,\n    });\n  });\n},\n\n// 监听scroll-view滚动事件,记录当前scrollTop的值\nscrollHandle: function(e) {\n  this.data.scrollTop = e.detail.scrollTop;\n},\n\n\n在上述示例代码中,addData方法用于拼接新数据并更新数据,scrollHandle方法用于监听scroll-view的滚动事件并记录当前scrollTop的值。在数据更新后,使用wx.nextTick方法来等待页面渲染完成后再将scroll-view滚动到之前的位置。
原文地址: https://www.cveoy.top/t/topic/pTLg 著作权归作者所有。请勿转载和采集!