0
点赞
收藏
分享

微信扫一扫

微信小程序数组动态赋值


作为一个小白,最近有兴趣试了试小程序开发,发现小程序里面写js和写网页的JavaScript还是有些不同的。

emmm,赋值真的有些坑。

首先是赋值后,如果要渲染到前端,一定要用that.setData({ }),否则改了也是木有用滴。

然后就是对数组的赋值,直接在setData里面是不可以给数组元素动态赋值的,那么怎么解决嘞。来个代码看看。

js  关注点在n[],p[](命名不规范~~~ 懒得改了)

// pages/friend/friend.js

var app = getApp()

Page({



/**

* 页面的初始数据

*/

data: {

'inform':'一对一学车”,享受VIP教学!',

flag: 'true',

imgUrls: [],

circleid:5,

content:'',

openid:'',

stus:[],

all:[],

stu:[],

comment:[],

textdata:'',

p:[],

n:[],

},



/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

wx.getStorage({

key: 'userInfo',

success: function (res) {

console.log("cheng");

that.setData({

userInfo: res.data

})

},

});

wx.getStorage({

key: 'openid',

success: function (res) {

console.log(res)

console.log(res.data)

that.setData({

openid: res.data

})

},

});

var array = new Array()


for (let i = 1; i < 4; i++) {

let url = "" + i + ".png"

wx.downloadFile({

url: url,

success: (res) => {

let temp = res.tempFilePath

array[i - 1] = temp

that.setData({

imgUrls: array

})

}

})



}

/* wx.request({

url: '',

method: 'POST',

header: { "Content-Type": 'application/json' },


success: function (res) {


that.setData({

all: res.data.circleall,


})

console.log(that.data.all.length)



for (var i = 0; i < that.data.all.length; i++) {

that.data.stu[i] = that.data.all[i];

console.log(that.data.stu[i].circleid)

wx.request({

url: '',

header: { "Content-Type": "application/x-www-form-urlencoded" },

method: 'POST',

data: {

openid: that.data.all[i].openid

},

success: function (res) {

let p = that.data.p;

let n = that.data.n;



p.push(res.data.userbyid.avatarUrl)

n.push(res.data.userbyid.nickName)



that.setData({

p,

n

})

console.log(that.data.p)



}



})





}

// console.log(that.data.p)

that.setData({

stus: that.data.stu

})







},

})*/





},





/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {


},



/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

var that = this


wx.request({

url: '',

method: 'POST',

header: { "Content-Type": 'application/json' },



success: function (res) {



that.setData({

all: res.data.circleall,

})

console.log(that.data.all.length)

that.setData({

p:[],

n:[]

})


for (var i = 0; i < that.data.all.length; i++) {

that.data.stu[i] = that.data.all[i];

console.log(that.data.stu[i].openid)

wx.request({

url: '',

header: { "Content-Type": "application/x-www-form-urlencoded" },

method: 'POST',

data: {

openid: that.data.all[i].openid

},

success: function (res) {


let p = that.data.p;

let n = that.data.n;


p.push(res.data.userbyid.avatarUrl)

n.push(res.data.userbyid.nickName)

that.setData({

p,

n

})

console.log(that.data.p)

}

})



}

console.log(that.data.p)

that.setData({

stus: that.data.stu

})


},

})



},



/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {



},



/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {



},



/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {



},



/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {



},



/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {



},

likereact: function (e) {



var that=this;

console.log('try')

console.log(e.target.dataset.id)

var id = e.target.dataset.id-1



console.log(that.data.stus[id].like)

that.data.stus[id].like = that.data.stus[id].like ? 0 : 1;

var l = "stus[" +id + "].like";

that.setData({

[l]: that.data.stus[id].like

})

},

/*

控制评论区

*/

show: function () {

this.setData({ flag: false })



},



showad: function () {

wx.showToast({

title: '广告位招标!',

})



},

to_message:function(){

wx.navigateTo({

url: '../friend/my_message',

})

},

liuyan:function(e){

var that = this;



that.setData({

content:e.detail.value,

circleid:e.target.id

})

console.log(that.data.circleid)

var t

that.setData({

t: that.data.content,

textdata: ' '

})

that.data.comment[that.data.circleid] = that.data.t

wx.request({

url: '',

method: 'POST',

header: { "Content-Type": 'application/json' },

success: function () {

that.setData({

circleid: that.data.circleid,

openid: that.data.openid,

comment: that.data.comment,

})

console.log("成功!")

},



})



},

ly_btn:function(){

var that=this

var t

that.setData({

t:that.data.content,

textdata:' '

})

that.data.comment[that.data.circleid]=that.data.t

wx.request({

url: 'https://www.lieyanwenhua.com/circominsert',

method: 'POST',

header: { "Content-Type": 'application/json' },

success: function () {

that.setData({

circleid: that.data.circleid,

openid: that.data.openid,

comment: that.data.comment,

})

console.log("成功!")

},



})

wx.showToast({

title: '留言成功',

})





}

})

wxml 这里的关注点在<说说>那块啦  

<!--pages/friend/friend.wxml-->

<!--<view class='news'>

<image class='n_pic' src='../image/news.png'></image>

<textarea class='new' disabled='true'>{{inform}}</textarea>

</view>-->


<view class='page'>

<view class='ad'>

<view class='container'>

<!--上方轮播图片广告宣传-->

<view class='swiper_adv'>

<swiper indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true' >

<block wx:for="{{imgUrls}}">

<swiper-item>

<image class='swiper_img' style='width:100%;height:280rpx;' src="{{item}}" bindtap='showad' mode="aspectFit" >

</image>

</swiper-item>

</block>

</swiper>

</view>

</view>

</view>


<!--说说-->

<view class='stu_all' >

<view class='stu_word'>

<view wx:for="{{stus}}" >

<view class='stu_item' data-id="{{item.circleid}}">

<view class='card'>

<!--这是主要的文字层-->

<view class='pic_intro'>

<image class='stu_pic' src="{{p[item.circleid-1]}}" ></image>

<text class='stu_name' >{{n[item.circleid-1]}}</text>

</view>

<view class='stu_photoa' wx:if="{{item.image1!=null |item.image2!=null|item.image2!=null}}" >

<image class='stu_photo' src="{{item.image1}}"></image>

<image class='stu_photo' src="{{item.image2}}"></image>

<image class='stu_photo' src="{{item.image3}}"></image>

</view>

<view class='stu_word_txt'wx:if="{{item.mess!=0}}">

<text class='stu_txt'>{{item.mess}}</text>

</view>

<view class='time'>

<text class='stu_time'>{{item.time}}</text>

</view>

<!--这是主要的icon层-->

<view class='like_unlike_comment'>

<image data-id="{{item.circleid}}" class='stu_like' src="{{item.like?'../image/like1.png' : '../image/like0.png'}}" bindtap='likereact' ></image>

</view>

<view class='comment' wx:if="{{comment[item.circleid]!=null}}">

<text>{{comment[item.circleid]}}</text>

</view>

<view>

<textarea class='liuyan' type="text" name="liuyantext" placeholder='留个言吧~' bindblur='liuyan' id="{{item.circleid}}" value='{{textdata}}'></textarea>

</view>

</view>

</view>

</view>

</view>


<!--隐藏的评论按钮-->

<view class='stu_button'>

<image class='stu_btn' src='../image/leavemessage.png' bindtap='to_message'></image>

</view>


</view>

</view>

 

微信小程序数组赋值

 

举报

相关推荐

0 条评论