微信小程序多列表渲染數(shù)據(jù)開關(guān)互不影響的實(shí)現(xiàn)

更新時(shí)間：2020年06月05日 15:13:42 作者：Vam的金豆之路

這篇文章主要介紹了微信小程序多列表渲染數(shù)據(jù)開關(guān)互不影響的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近在學(xué)習(xí)小程序，正好發(fā)現(xiàn)一個(gè)問題，微信小程序多列表渲染數(shù)據(jù)開關(guān)怎么互不影響，記錄一下，分享給大家

<!--pages/list/list.wxml-->
<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:''
 },
 //事件處理函數(shù)
 // bindcancel:function (e) {
 // var that = this
 // console.log(e.target.dataset.id)
 // that.setData({
 // tr: 1,
 // })
 // },
 bindDateChange:function (e) {
 console.log('picker發(fā)送選擇改變，攜帶值為', 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', //僅為示例，并非真實(shí)的接口地址
 method: 'post',
 header: {
 'content-type': 'application/json' // 默認(rèn)值
 },
 success(res) {
 console.log(res.data)
 that.setData({
  list: res.data
 })
 }
 })
 }
})

總結(jié)：

這里使用了雙層循環(huán)，需要注意的是使用wx:key='*this'循環(huán)本身
使用wx:if="{{item.seleced==1}}"標(biāo)記點(diǎn)擊效果，給數(shù)據(jù)自定義屬性

arr[index1][index].seleced = 1

到此這篇關(guān)于微信小程序多列表渲染數(shù)據(jù)開關(guān)互不影響的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序多列表渲染互不影響內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: