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


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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Express框架之connect-flash详解
May 31 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Vuex的实战使用详解
Oct 31 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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实现递归复制整个文件夹的类实例
2015/08/03 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
angular *Ngif else用法详解
2020/12/15 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
Python中集合类型(set)学习小结
2015/01/28 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python中的两个内置模块介绍
2015/04/05 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
教学实习自我评价
2014/01/28 职场文书
学习保证书范文
2014/04/30 职场文书
村班子对照检查材料
2014/08/18 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
档案接收函格式
2015/01/30 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android