在微信小程序里面没有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. SVD图片有损压缩测试

    注意文件名别保持成svd.m,这样与系统的默认svd程序冲突 图片处理函数生成的三组二维数组对应RGB,处理时保留一组 clear all; close all; clc; a1=imread('C: ...

  2. Android 全局搜索条写成自定义控件-曹永思

    图文: 1.Android 自定义控件的布局文件 2.编写Android 自定义控件的要处理的逻辑代码(曹永思) 3.在调用自定义控件的 Activity的布局文件中调用Android 称之为控件,控 ...

  3. 工作中的小tips(持续更新)

    1.在工作的时候一定要留下痕迹,这样即使乙方抵赖,或者说领导认为你没干活的时候留下证据(电话没有微信,邮件之类的文字类有效果) 2.每天晚上下班之前将一天的工作总结一下,把第二天的工作给罗列出来,以方 ...

  4. C#窗体操作的小技巧

    窗体在屏幕居中 ) - (), (Screen.GetBounds() - (), this.Width, this.Height, BoundsSpecified.Location);

  5. IT桔子-抓取数据

  6. 20169207《Linux内核原理与分析》第八周作业

    本章的作业依旧包括两部分,1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第11,12章. 2.学习MOOC「Linux内核分析」第六讲「进程的 ...

  7. Android 如何通过浏览器打开App

    首先给出参考资料http://my.oschina.net/liucundong/blog/354029?p=3#rpl_291191828 通过浏览器直接打开Android应用程序 Android ...

  8. hdu 5083 有坑+字符串模拟水题

    http://acm.hdu.edu.cn/showproblem.php?pid=5083 机器码和操作互相转化 注意SET还要判断末5位不为0输出Error #pragma comment(lin ...

  9. pm2

    使用PM2将Node.js的集群变得更加容易(http://www.cnblogs.com/jaxu/p/5193643.html) nodejs pm2配置使用教程(http://blog.csdn ...

  10. 采用c3p0数据库连接池底层是jdbc的数据库的增删改查

    1.新建dbutils包,里面是JdbcUtils类: package cn.com.xxx.xxx.dbutil; import java.sql.Connection; import java.s ...