要实现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滚动到之前的位置。

Uniapp scroll-view 加载新数据后停留在原位置的实现方法

原文地址: https://www.cveoy.top/t/topic/pTLg 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录