问题背景

在小程序列表中，对某一条点赞，成功后setData修改点赞数量，接口请求成功回调如下

success: res => {this.data.posters[index].like_sum = parseInt(this.data.posters[index].like_sum) + 1;this.setData({poster: this.data.posters})
},

此处的index是在wxml中for循环的index偏移下标，绑定到节点数据：
data-index="{{index}}"
wxs中通过点击事件获取：
var index = parseInt(event.currentTarget.dataset.index);
这里不做赘述

发现页面向上或向下移动了一定距离，如gif图所示：

想了想应该是因为setData整个posters数组后，重新渲染了整个列表，每条数据的图片重新渲染尺寸时对页面产生了一定影响，导致列表抖动了位置。

那么如何解决呢？

处理办法

在setData时写成如下样子即可只刷新指定节点，不会导致整个列表都重绘：

this.setData({//poster: this.data.posters, //原来这样写的["posters[" + index + "]"]: this.data.posters[index], //换成这样可局部刷新
})

只需更换一行代码即可。

如对您有帮助，不妨点赞关注一波～

微信小程序列表局部(单条)刷新相关推荐

微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...
微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序实现下拉刷新功能
第一步.在app.json文件里把enablePullDownRefresh设置为true 第二步.在需要下拉刷新页面的js文件里写onPullDownRefresh:function(){}这个方法 ...
微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
微信小程序webview页面不刷新，webview缓存页面不刷新，小程序webview页面不刷新，小程序webview地址追加参数页面还是缓存，解决办法
项目需求,在微信小程序首页的 banner 图,打开公司官网,这个功能很好实现,就是专门整个 webview 组件所在页面,以后凡是有这种需求的都跳转到这个页面,只需要切换不同的路由地址就行了,可是最 ...
微信小程序五下拉刷新
微信小程序提供了原声的下拉刷新,三个小点的下拉刷新. 在.json 中写 {"enablePullDownRefresh": true, //开启下拉刷新"backgro ...

微信小程序列表局部(单条)刷新

问题背景

处理办法

微信小程序列表局部(单条)刷新相关推荐

最新文章

热门文章