您的位置：首页 > 移动开发 > 微信开发

微信小程序--wx:for

2017-07-02 10:32 495 查看
wx:for 与block标签

wxml:

<block class="searchListContent" wx:for="{{songInfo}}">
<view class="centerFather">
<view class="{{(index%2)?'searchListSong':'searchListSong1'}}">
<view bindtap="ifPlay"  class="searchListSongNText">{{item.songN}}</view>
<view  class="searchListSingerText">{{item.singer}}</view>
</view>
</view>
</block>
js:

page({
data:{
"songInfo": {
"0": {
"songN": "歌名",
"singer": "歌手"
},
"1": {
"songN": "你给我听好1",
"singer": "陈奕迅"
},
"2": {
"songN": "你给我听好2",
"singer": "陈奕迅"
},
"3": {
"songN": "你给我听好5",
"singer": "陈奕迅"
},
"4": {
"songN": "你给我听好3",
"singer": "陈奕迅"
},
"5": {
"songN": "你给我听好4",
"singer": "陈奕迅"
},
"6": {
"songN": "你给我听好5",
"singer": "陈奕迅"
},
"7": {
"songN": "你给我听好3",
"singer": "陈奕迅"
},
"8": {
"songN": "你给我听好4",
"singer": "陈奕迅"
},
"9": {
"songN": "你给我听好4",
"singer": "陈奕迅"
}
}
}

})
效果：



注意：当渲染的列表中有嵌套的标签或多个同级标签，只能用block做容器

另一重要应用点：

wx:for循环生成的列表，可以将index赋值给标签的data-xxx属性，js通过e.currentTarget.dataset.xxx或e.target.dataset.xxx获取index的值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  微信小程序 wxfor 列表渲染 获取
相关文章推荐
新的分享
章节导航