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


Posted in Javascript onJune 05, 2020

最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家

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

<!--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:''
 },
 //事件处理函数
 // 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

到此这篇关于微信小程序多列表渲染数据开关互不影响的实现的文章就介绍到这了,更多相关小程序多列表渲染互不影响内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
taro 实现购物车逻辑的实例代码
Jun 05 #Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 #Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 #Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 #Javascript
You might like
单位速度在实战中的运用
2020/03/04 星际争霸
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python yield 使用浅析
2015/05/28 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
C#基础面试题
2016/10/17 面试题
金融专业个人的自我评价
2013/10/18 职场文书
端午节演讲稿
2014/05/23 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
商务考察邀请函模板
2015/02/02 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python