微信小程序--wx:for

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的值