局部刷新，例如，列表中只更新收藏图标

嘿，小苹果

于 2022-11-30 10:47:44 发布

阅读量393

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/128110910

版权

javascript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

1、不要每次收藏都会进行刷新页面

2、只是收藏图标进行刷新改变即可，不需要整个页面进行刷新

html中

<view class="goodsItem" v-for="(item,index) in list" :key="index">
	<-- item.isColl == 1 是收藏， item.isColl == 0 是未收藏-->
	<image :src="item.isColl==1?'../../../../static/like.png':'../../../../static/like2.png'"
	class="likeImg" @click.stop="addCollection(item.id,index)"></image>
</view>

javascript中，局部刷新，改变图标

//收藏商品，idnex 是下标
addCollection(id,index) {
	var that = this;
	this.httpClient.post('ouColi', {
		userId: this.userId
	}).then(res => {
		// 局部刷新 开始。 =======这样做，只有图标刷新 重点
		uni.showToast({
			title: '操作成功',
			duration: 500
		});
		this.list.forEach((item,i) => {
				if(index == i){
					if(item.isColl == 0){
						item.isColl = 1
					}else {
						item.isColl = 0
					}
				}
		});
		// 局部刷新 结束。========

		// //初始化数据 这样做 会整个 页面刷新，不提倡这样做
		// that.list = [];
		// that.page = 1;
		// that.zPage = 1;
		// that.getList()

	})
},

javascript中，局部刷新，从数组中移除特定下标的元素

 //收藏商品
  addCollection(id,index) {
    var that=this;
    this.httpClient.post('ousColi',{userId: this.userId}).then(res => {
       
		// 局部刷新 开始===========
		uni.showToast({
			title: '操作成功',
			duration: 500
		});
		this.list.splice(index, 1);
		// 局部刷新 结束 ===========
    })
  },