微信小程序多列表渲染数据开关互不影响

旧城等待， 2021-08-13 15:15 425阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

<wxs src="../../utils/filter.wxs" module="filter" />
    <view class="list">
        <view wx:for="{ {list}}" wx:key="{ {index}}" class="ban" data-main='{ {index}}'>
            <view class="time">{
       {filter.replaceStar(index)}}</view>
            <view wx:for="{ {item}}" wx:key="*this" class="cen ovf" data-id='{ {item.id}}' data-index='{ {index}}' >
                <navigator url="../details/details?id={ {item.id}}" open-type="navigate" class="ovf item_1">
                   <view>
                           <view class="name">{
       {item.ymname}}</view>
                           <view class="msg">{
       {item.ymms}}</view>
                   </view>
                </navigator>
                <view class="check ovf">
                        <view id="jl" bindtap='cancle' wx:if="{ {item.seleced==1}}" data-fid='{ {item.fid}}' data-id='{ {item.id}}' data-index='{ {index}}'>已记录</view>
                        <picker mode="date" data-id='{ {item.id}}' data-index='{ {index}}' data-fid='{ {item.fid}}' bindchange="bindDateChange" bindcancel="bindcancel" class="item_2" name="picker" wx:if="{ {item.seleced!=1}}">
                          <view id="jl" bindchange="checkboxChange" value='{ {date}}'>记录</view>
                        </picker>
                        <view class="zi" wx:if="{ {item.seleced==1}}">{
       {item.time}}</view>
                </view>
            </view>
        </view>
    </view>
    <view class="fix" bindtap='wait'>
        <text>查看待\n打疫苗</text>
    </view>

// pages/list/list.js
    const app = getApp()
    var time =''
    Page({ 
      data: { 
        id:0,
        list: [],
        date:'',
        tr:'',
        s:''
      },
      //事件处理函数
      // bindcancel:function (e) { 
      // var that = this
      // console.log(e.target.dataset.id)
      // that.setData({ 
      // tr: 1,
      // })
      // },
      bindDateChange:function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        time = e.detail.value
        var that = this
        var arr = that.data.list
        var index = e.target.dataset.index
        var index1 = e.target.dataset.fid
        arr[index1][index].seleced = 1
        arr[index1][index].time = e.detail.value
        that.setData({ 
          id: e.target.dataset.id,
          date: time,
          list: arr
        })
      },
      cancle:function (e) { 
        var that = this
        var arr = that.data.list
        var index = e.target.dataset.index
        var index1 = e.target.dataset.fid
        arr[index1][index].seleced = ''
        that.setData({ 
          id: e.target.dataset.id,
          list: arr
        })
      },
      wait:function () { 
        wx.navigateTo({ 
          url: '../wait/wait'
        })
      },
      lis: function () { 
          wx.navigateTo({ 
            url: '../archives/archives'
          })
        },
      onLoad: function () { 
        var that = this
        wx.request({ 
          url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=yimiaolist', //仅为示例，并非真实的接口地址
          method: 'post',
          header: { 
            'content-type': 'application/json' // 默认值
          },
          success(res) { 
            console.log(res.data)
            that.setData({ 
              list: res.data
            })
          }
        })
      }
    })

总结：  
这里使用了双层循环，需要注意的是使用`wx:key='*this'`循环本身  
使用`wx:if="{ {item.seleced==1}}"`标记点击效果，给数据自定义属性

arr[index1][index].seleced = 1

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/553266231e8344079949a94067ce8581.png