html52.com
我爱小程序-开发者交流社区

小程序中循环渲染数组的单个元素修改,setDate({})怎么修改?

<view  class="row" wx:for="{{datalist}}"  wx:key="index" bindtap="rowbtn" data-id="{{item._id}}" data-idx="{{index}}"<view >{{index}}这是文章标题</view> //这是WXML里面的代码
 <view>这是时间{{item.date}}</view>
 <view>这是点击次数{{item.hits}}</view>
</view>

WXJS中的代码

Page({
data:{
    datalist:[],
    page:"",
    num:"",
   
},


// 每个列表的点击事件
rowbtn(e){
    var _this=this
    console.log(e.currentTarget.dataset.id,e.currentTarget.dataset.idx)
   var data1=e.currentTarget.dataset
    wx.cloud.callFunction({
        name:"loginl",
        data:{
             id:e.currentTarget.dataset.id,
             idx:e.currentTarget.dataset.idx
        },
             success:res=>{
                 console.log(res.result)
                 wx.cloud.callFunction({
                     name:"login0",
                     data:{
                        id: e.currentTarget.dataset.id,
                        idx:e.currentTarget.dataset.idx
                     }
                 }).then(res=>{
                     console.log(res.result.data)
                var  idx=e.currentTarget.dataset.idx
                 var hits ="e.currentTarget.dataset[" + idx + "].hits"
                 
                                        _this.setData({
                                   [hits]:res.result.data.hits
                     })
                 })
                    }
                                        })              
                             
                            
    },              
                          
                   
                 
  
login11(id,idx){
// wx.cloud.callFunction({
//     name:"login0",
//     data:{
//         id,
       
//     },
//     success:res=>{
//         console.log('result',res.result.data.hits)
      
//        var newData=res.result.data
     
//       this.setData({
//           datalist:newData[idx]
//       })
//     }
// }
    
// )
},



getdata:function(num=5,page=0){ 
 
    wx.cloud.callFunction({
        name:"getlist",
        data:{
            num:num,
            page:page
        },
        success:res=>{
           
            var oldData=this.data.datalist
            var newData=oldData.concat(res.result.data)//内容拼接模式 用 .concat边接前后数据 相当于中文之后的&
            this.setData({
                datalist:newData   //更新数据的时候把结果换成新数据 
            })
        }
    })
},


onLoad(options){


this.getdata()
},
onReachBottom:function(){
    var page=this.data.datalist.lenth
  this.getdata(5,page)  


    
}




})

云函数loginl的代码

// 云函数入口文件
const cloud = require('wx-server-sdk')


cloud.init()


const db=cloud.database();
const  _  =db.command;


// 云函数入口函数
exports.main = async (event, context) => {
   return await db.collection('logs').doc(event.id).update({
    data:{
        hits:_.inc(7)
    }


   })
}

云函数的代码 login0

// 云函数入口文件
const cloud = require('wx-server-sdk')


cloud.init()
const db=cloud.database()


// 云函数入口函数
exports.main = async (event, context) => {


    var id=event.id
    try {
        return await db.collection('logs').doc(id).get()
    } catch (error) {
        
    }
}

网友回复

笑看人生:

在渲染的时候,点击页面,不会自动更新

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付