Chinaunix首页 | 论坛 | 博客
  • 博客访问: 268161
  • 博文数量: 189
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1808
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(189)

文章存档

2018年(26)

2017年(5)

2016年(53)

2015年(89)

2014年(17)

分类: 其他平台

2018-09-07 13:14:46

JS:代码
在兴趣爱好的数据中添加checked属性,判断是否选中状态

点击(此处)折叠或打开

  1. hoby_list: [
  2.       { name: '看书', value: "0", checked: false },
  3.       { name: '写字', value: "1", checked: false },
  4.       { name: '看电影', value: "2", checked: false },
  5.       { name: '弹钢琴', value: "3", checked: false },
  6.       { name: '游泳池', value: "4", checked: false },
  7.       { name: '篮球', value: "5", checked: false },
  8.       { name: '乒乓球', value: "6", checked: false },
  9.       
  10.     ],

点击(此处)折叠或打开

  1. add_style: function (e) {
  2.     var _this = this;
  3.     //获取点击当前的下标
  4.     var mdc_index = e.currentTarget.dataset.mdc_index;
  5.     console.log(mdc_index)
  6.     //把data定义的hoby_list数据从新设置item的checked的状态也就是true|false
  7.     var arrs = this.data.hoby_list;
  8.     console.log(arrs);
  9.     //item当前的状态取反
  10.     if(arrs[mdc_index].checked==false){
  11.       arrs[mdc_index].checked = true;
  12.     }else{
  13.       arrs[mdc_index].checked = false;
  14.     }
  15.     //数据从新复制,衔接下一次循环
  16.     _this.setData({
  17.       hoby_list:arrs
  18.     })

  19.   },
    WXML代码:

点击(此处)折叠或打开

  1. <view class='top' >
  2. /*循环hoby_list数据 ,
  3. 循环数据的下标,
  4. 点击事件 ,
  5. 小标需要传给JS ,
  6. 三元表达式判断hoby_list(item) 属性checked是否选中状态 ture | false
  7. */
  8.   <label wx:for="{{hoby_list}}" wx:for-index="i" bindtap='add_style' data-mdc_index="{{i}}" wx:key="{{hoby_list}}" class="{{item.checked ? 'mdc_active':'' }}" >
  9.     <view class="top_item" >{{item.name}}</view>
  10.   </label>
  11.   </view>
WXSS代码:

点击(此处)折叠或打开

  1. .top{
  2.   display: flex;
  3.   flex-direction:row;
  4.   justify-content: flex-start;
  5.   flex-flow: wrap;
  6.   padding-bottom: 20rpx;
  7.  
  8. }
  9. label{
  10.   margin-top: 20rpx;
  11.   padding: 10rpx 20rpx;
  12.   border: 1px solid rgb(190, 190, 190);
  13.   margin-left: 20rpx;
  14.   font-size: 30rpx;
  15.   border-radius:5px;
  16.   color:rgb(190, 190, 190);
  17.   background: #fff;
  18.  
  19. }
  20. .mdc_active{
  21.   border: 1px solid skyblue;
  22.   background: skyblue;
  23.   color:aliceblue;
  24. }
未选中是白色背景 选中是蓝色背景
效果图:



阅读(24) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册