在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作

一、单项

目标需求:实现下图,给点击的view增加类,每次只能选择一个。

主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。

实现代码

.wxml文件

 <view>
<view class='appointent-date'>
<view class="appointent-date-div {{state==index?'active-tag':''}}" bindtap="select_date" wx:for="{{dates}}" data-key='{{index}}'>
<view class="flex-item" >
<rich-text class='data_name'>{{item.data_name}}</rich-text>
<rich-text>{{item.name}}</rich-text>
</view>
</view>
</view>
</view>

.wxss文件

 .appointent-date-div{
display:inline-block;
width:20%;
text-align: center;
margin-top: 30rpx;
}
.flex-item{
display: inline-block;
width:96rpx;
height: 88rpx;
font-size: 26rpx;
border:2rpx solid #999;
text-align: center;
border-radius: 10rpx;
color: #999;
cursor: pointer;
line-height: 30rpx;
}
.data_name{
font-size: 36rpx;
line-height: 52rpx; }
.active-tag .flex-item{
background: #c8321e;
color:#fff;
border:1rpx solid #fff;
}

.js文件

 Page({

   /**
* 页面的初始数据
*/
data: {
dates: [
{ "data_name": "30", "name": "十三"},
{ "data_name": "1", "name": "十四"},
{ "data_name": "2", "name": "十五"},
{ "data_name": "3", "name": "十六"},
{ "data_name": "4", "name": "十七"},
{ "data_name": "5", "name": "十八"},
{ "data_name": "6", "name": "十九"},
{ "data_name": "7", "name": "二十"},
{ "data_name": "8", "name": "廿一"},
{ "data_name": "9", "name": "廿二"},
{ "data_name": "10", "name": "廿三"},
{ "data_name": "11", "name": "廿四"},
{ "data_name": "12", "name": "廿五"},
{ "data_name": "13", "name": "廿六"},
{ "data_name": "14", "name": "廿七"}
],
state:''
},
//选择日期后加样式
select_date: function (e) {
this.setData({
state: e.currentTarget.dataset.key,
});
},
})

二,多项

目标需求:实现下图,给点击的view增加类,再次点击时取消,可以多项选择。

主要思路

给dates数组增加一个属性state, 1表示状态选中,0表示未选中,每次点击时修改state的值。

实现代码:

.wxml文件

 <view class='appointent-date'>
<view class="appointent-date-div {{item.state==1?'active-tag':''}}" bindtap="select_date" wx:for="{{dates}}" data-key='{{index}}'>
<view class="flex-item" >
<rich-text class='data_name'>{{item.data_name}}</rich-text>
<rich-text>{{item.name}}</rich-text>
</view>
</view>
</view>

.wxss文件

 .appointent-date{
padding:10rpx 30rpx 40rpx 30rpx;
background: #fff;
box-sizing: border-box;
}
.appointent-date-div{
display:inline-block;
width:20%;
text-align: center;
margin-top: 30rpx;
}
.flex-item{
display: inline-block;
width:96rpx;
height: 88rpx;
font-size: 26rpx;
border:2rpx solid #999;
text-align: center;
border-radius: 10rpx;
color: #999;
cursor: pointer;
line-height: 30rpx;
}
.data_name{
font-size: 36rpx;
line-height: 52rpx; }
.active-tag .flex-item{
background: #c8321e;
color:#fff;
border:1rpx solid #fff;
}

.js文件

 Page({

   /**
* 页面的初始数据
*/
data: {
dates: [
{ "data_name": "30", "name": "十三", "state": 0 },
{ "data_name": "1", "name": "十四", "state": 0 },
{ "data_name": "2", "name": "十五", "state": 0 },
{ "data_name": "3", "name": "十六", "state": 0 },
{ "data_name": "4", "name": "十七", "state": 0 },
{ "data_name": "5", "name": "十八", "state": 0 },
{ "data_name": "6", "name": "十九", "state": 0 },
{ "data_name": "7", "name": "二十", "state": 0 },
{ "data_name": "8", "name": "廿一", "state": 0 },
{ "data_name": "9", "name": "廿二", "state": 0 },
{ "data_name": "10", "name": "廿三", "state": 0 },
{ "data_name": "11", "name": "廿四", "state": 0 },
{ "data_name": "12", "name": "廿五", "state": 0 },
{ "data_name": "13", "name": "廿六", "state": 0 },
{ "data_name": "14", "name": "廿七", "state": 0 }
]
},
//选择日期后加样式
select_date: function (e) {
var index = e.currentTarget.dataset.key;
if (this.data.dates[index].state == 1) {
this.data.dates[index].state = 0;
} else if (this.data.dates[index].state == 0) {
this.data.dates[index].state = 1;
}
this.setData({
dates: this.data.dates,
});
},
})

微信小程序实现给循环列表点击添加类(单项和多项)的更多相关文章

  1. 微信小程序实现给循环列表添加点击样式实例

    微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...

  2. 微信小程序编写新闻阅读列表

    微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...

  3. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  4. 微信小程序之for循环

    在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关 ...

  5. 微信小程序中的循环遍历问题

    比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口1 ...

  6. 微信小程序wx:for循环

    最近做微信小程序碰到了一些问题,和wx:for循环相关,wx:for有很多用途,例如可以用于swiper中图片的循环,也就是所谓的轮播图,也可以用于其它的循环,可以大大地减少代码量. 但wx:for. ...

  7. 微信小程序:防止多次点击跳转(函数节流)

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数 ...

  8. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  9. 微信小程序开发——超链接或按钮点击跳转到其他页面失效

    1. 超链接导航失效: 小程序规则——wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

随机推荐

  1. word中括号中公式对齐

    在写论文中使用到括号,但没有对齐,如: 但是我需要对齐,如: 此时只需要在每行需要对齐的地方输入‘&’即可(此符号在专业型括号是不可见的,在线性中可见,上图为专业型),同样也可以有多个对齐点, ...

  2. 2019.01.09 bzoj2599: [IOI2011]Race(点分治)

    传送门 题意:给一棵树,每条边有权.求一条路径,权值和等于K,且边的数量最小. 思路: 考虑点分治如何合并. 我们利用树形dpdpdp求树的直径的方法,边dfsdfsdfs子树边统计答案即可. 代码: ...

  3. SimpleDateFormat转换时间,12,24时间格式[转]

    SimpleDateFormat转换时间,12,24时间格式 来自:http://blog.csdn.net/dongguang1082/article/details/4387165 在使用Simp ...

  4. c# 产生随机数 程序所在路径

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. maven打包某个分支的包

    maven打某个分支的包命令: mvn clean install -Dmaven.test.skip=true -Pdevelop

  6. estimator = KerasClassifier

    如何在scikit-learn模型中使用Keras 通过用 KerasClassifier 或 KerasRegressor 类包装Keras模型,可将其用于scikit-learn. 要使用这些包装 ...

  7. js点击空白处触发事件

    我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...

  8. 视图,sql注入问题,事物,存储过程

    视图:本质是一张虚拟的表数据来自select语句用途是保障原表安全 功能1:隐藏部分数据,开放指定数据功能2:因为视图可以将查询结果保存的特性,我们可以用视图来达到减少书写sql语句的功能 例如:se ...

  9. C++指针二(易错模型)

    规则一:Main(主调函数)分配的内存(在堆区,栈区.全局区)都可以在被调用函数里使用.如果在被调用函数里面的临时区(栈)分配内存,主调用函数是不能使用的. #include "stdio. ...

  10. noip第19课作业

    1. 谁考了第K名 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名学生的学号和成绩. [输入格式] 第一行有两个整数,分别是学生的人数n(1<=n<=100 ...