小程序点赞实现局部刷新

news/2024/7/10 2:49:58 标签: vue, 小程序
//html
 <view class="say_item"  bindtap="open"  data-id="{{item.id}}">




//js
open (e) {      //点赞点击事件
let dynamicId = e.currentTarget.dataset.id//点赞的时候传的id
        let allNewsList = this.data.list//列表数组
  for (let i = 0; i < allNewsList.length; i++) {
    if (dynamicId == allNewsList[i].id) {
      console.log(allNewsList[i])
      allNewsList[i].likeCount=allNewsList[i].likeCount+1//点赞数
      allNewsList[i].isLiked=true       //点赞状态
    }
  }
  this.setData({
       list:allNewsList,//重新定义列表
        })
}

方法二

w class="say_item"  bindtap="open"  data-index="{{item.index}}">




//js
open (e) {      //点赞点击事件
let index = e.currentTarget.dataset.index//获取下标
        let allNewsList = this.data.list//列表数组
 allNewsList[index].likeCount=allNewsList[index].likeCount+1//点赞数
      allNewsList[index].isLiked=true       //点赞状态
  this.setData({
       list:allNewsList,//重新定义列表
        })
}

 


http://www.niftyadmin.cn/n/1367294.html

相关文章

小程序从数组中删除指定对象,返回新的长度源代码

html <view data-index{{index}} bindtapcancel>删除</view> js cancel(e) {let dynamicId e.currentTarget.dataset.index//点击返回去的下标let allNewsList this.data.list//原始列表数组allNewsList.splice(dynamicId, 1);//删除指定下标}this.setData({lis…

小程序富文本设置图片大小

html <rich-text nodes"{{listmore}}"></rich-text> js this.setData({ contents:res.data.contents.replace(/\<img/gi, <img class"add" style"width:100%;height:auto")//class"add"我是设置了全局样式&am…

小程序自定义导航下标图片

html <view class"container"><!-- tab导航栏 --><!-- scroll-left属性可以控制滚动条位置 --><!-- scroll-with-animation滚动添加动画过渡 --><scroll-view scroll-x"true" class"nav" scroll-left"{{navScr…

vue下载图片,word,pdf,自定义下载名称

downloadFiles(url, name) {//url是路径&#xff0c;name是要更改的下载名称let link document.createElement(a)let url url// 这里是将url转成blob地址&#xff0c;fetch(url).then(res > res.blob()).then(blob > { // 将链接地址字符内容转变成blob地址link.href …

小程序一键拨打电话

tocall(e){console.log(e.currentTarget.dataset.phone)//获取的电话号码wx.makePhoneCall({phoneNumber: e.currentTarget.dataset.phone}).catch((e) > {// console.log(e) //用catch(e)来捕获错误{makePhoneCall:fail cancel}})},

小程序生成二维码

wxml <canvas canvas-idqrcode></canvas> js var QRCode require(../../utils/weapp-qrcode.js); var qrcode/*** 生命周期函数--监听页面加载*/onLoad: function (options) {qrcode new QRCode(qrcode, { //qrcode为html中定义的canvas-idtext: "http…

微信公众号授权前端(uniapp为例)

const base_url http://baidu.com// 前端域名const wx_url https://open.weixin.qq.com/connect/oauth2/authorize?appidappid&redirect_uribase_url&response_typecode&scopesnsapi_base&state123#wechat_redirectexport default {components: {},data() {…

vue本地存储

localStorage.setItem(token, res.Msg.token); localStorage.getItem(token);//uniuni.setStorageSync(token, 123456) uni.getStorageSync("token"); uni.removeStorageSync(token);//移除//小程序 wx.setStorageSync(key, value)//arr是要存的数据 wx.getStorageSy…