zoukankan      html  css  js  c++  java
  • 微信小程序开发笔记(十)--多选标签效果

    1.wxml:

    <block wx:for='{{itemList}}' wx:key="id">
        <view class="{{item.isSelected?'_on':''}}" bindtap='itemSelected' data-index='{{index}}'><text>{{item.name}}</text></view>
    </block>

    2.wxss:

    ._on {
      color: #1DB1CF;
      border: 1rpx solid #1DB1CF;
    }

    3.wxjs:

    Page({
      data: {
        itemList: [{
            id: 1,
            name: '五险一金',
            isSelected: false,
          },
          {
            id: 2,
            name: '包吃包住',
            isSelected: false,
          },
          {
            id: 3,
            name: '朝九晚五',
            isSelected: false,
          },
        ]
      },
    
      itemSelected: function (e) {
        let index = e.currentTarget.dataset.index;
        let item = this.data.itemList[index];
        item.isSelected = !item.isSelected;
        this.setData({
          itemList: this.data.itemList,
        });
      },
    })
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    redis持久化RDB与AOF
    oracle PL/SQL习题
    pl/sql中的三种循环
    转 Oracle Cursor用法总结
    Oracle与MySQL的SQL语句区别
    安装mysql 遇到最后一步卡死解决方案
    Oracle安装
    mysql安装
    sql语句的优先级
    MVC设计模式
  • 原文地址:https://www.cnblogs.com/antao/p/12805009.html
Copyright © 2011-2022 走看看