微信小程序for生成的列表下如何渲染单独View

微信小程序虽然类似网页,但它没有像JavaScript那样的DOM操作,用for产生的列表,用普通的setData方式渲染,会导致所有列表数据都被改变,因此面对后台传回的随机列表的点击事件有一套特殊的处理渲染方法。


首先必须对传回的列表进行数字标记,比如第一个块标记为0,第二个标记为1。
当用户点击第一个块时,获取传入对象的标记,在利用数组的方式,定位到具体的块,接着在渲染该单独块。
演示源码如下

//点击事件发生后传入对象e
btnclick: function (e) {
//将被点击的对象加入_this变量(不然在网络操作中无法渲染到前台)
var _this = this
//发起网络请求
wx.request({
//请求Url
url: '***.php',
//请求类型
method: "POST",
//请求头
header: {
'content-type': 'application/x-www-form-urlencoded'
},
//需要传输的数据
data: {
UID: Data
},
//数据返回成功
success: function (data) {
//获取e对象中的value(确定后台已将此标记传到前台)
var code = e.detail.value
//生成字符串"list[0].checked"
var str = "list[" + code +"].checked"
//渲染到前台
_this.setData({
[str]: data
}

注意,字符串的数组名渲染时必须括上[]
this无法在网络请求的数据返回函数中使用,所以提前就需要装进变量_this里

发表评论