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


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 function调用时的参数检测常用办法
Feb 26 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
main.php
2006/12/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js密码强度检测
2016/01/07 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python 字符串追加实例
2019/07/20 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
如何基于python实现归一化处理
2020/01/20 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
班主任工作年限证明
2014/01/12 职场文书
秋季运动会广播稿
2014/02/22 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
舞出我人生观后感
2015/06/16 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL