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


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 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
javascript中Function类型详解
Apr 28 Javascript
javascript每日必学之循环
Feb 19 Javascript
Three.js学习之几何形状
Aug 01 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
JS实现音量控制拖动
Jan 15 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
js实现翻牌小游戏
Jul 31 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
生成php程序的php代码
2008/04/07 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python3中zip()函数使用详解
2018/06/29 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python求最大值最小值方法总结
2019/06/25 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
售后服务承诺书
2014/03/26 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书