小程序开发小结
将自己在小程序中遇到的一些问题和解决办法总结一下~
本地模拟数据
data.js
// 本地模拟数据
const userInfo =
{
"nickName": "yeo",
"publish": 11,
"fans": 8,
"follow": 10
}
// 定义数据出口
module.exports = {
userInfo: userInfo
}
在开发页面中使用数据源
//引入本地json数据,这里引入的就是第一步定义的json数据
const userInfo = require('../../data/userInfo.js');
...
this.setData({ userInfo: userInfo.userInfo });
循环列表点击添加样式
...
<view class="comment-container" wx:for="{{comment.comment}}" wx:key="{{index}}">
<view class="comment-part">
<view class="comment-left">
<image src="{{item.avatarUrl}}"></image>
</view>
<view class="comment-right">
<text class="font-blod author">{{item.author}}</text>
<text class="comment-des">{{item.detail}}</text>
</view>
<view class="heart" bindtap="like" data-index="{{index}}">
<text class="iconfont icon-shoucang {{item.isSelected ? 'active' :''}}"></text>
</view>
</view>
<view class="time">
<text>{{item.time}}</text>
<text wx:if="{{item.likes >0}}" class="likes">{{item.likes}}次赞</text>
</view>
</view>
...
like(e) {
let index = e.currentTarget.dataset.index;
let arr = this.data.comment.comment;
if (arr[index].isSelected) {
arr[index].isSelected = false;
} else {
arr[index].isSelected = true;
}
this.setData({
[`comment.comment[${index}].isSelected`]: arr[index].isSelected
})
}
setData设置数组对象的某个属性值
假设一个对象数组:
comment:[
{'aaa':'111'
'isSelected':false
},
{'aaa':'222'
'isSelected':false
}]
想要设置comment的isSelected属性,
this.setData({
comment[index].isSelected: true//index为下标(代码表示场景)
});
//因为index为变量,且存在[],所以我们可以用拼接字符串的方式
that.setData({
[bingo]:1
})
//但是每次都要定义变量看起来就躁
//所以可以这样
that.setData({
[`comment[${index}].isSelected`]:true //模板字符串里面用${}计算属性
});
...
//data格式
data: {
addressData:{
name:'',
tel:'',
address:'',
more:''
},
defult:''
},
//setData的使用方法
that.setData({
['addressData.address']: '大地影院'
})
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hikhb1abhjb