zoukankan      html  css  js  c++  java
  • 微信小程序 单选按钮的实现

    wxml:

    <view class='parameter-wrap'>
    <block wx:for="{{parameter}}" wx:key="parameter">
    <button class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</button>
    </block>
    </view>
     
    js:
     
    data:{
    parameter: [{ id: 1, name: '失物招领' }, { id: 2, name: '寻物启事' }],
    }
     
     
    parameterTap: function (e) {
    //e是获取e.currentTarget.dataset.id所以是必备的,跟前端的data-id获取的方式差不多
    var that = this
    var this_checked = e.currentTarget.dataset.id
    var parameterList = this.data.parameter//获取Json数组
    for (var i = 0; i < parameterList.length; i++) {
    if (parameterList[i].id == this_checked) {
    parameterList[i].checked = true;//当前点击的位置为true即选中
    }
    else {
    parameterList[i].checked = false;//其他的位置为false
    }
    }
    that.setData({
    parameter: parameterList
    })
    },
     
    css:
     
    .checked_parameter{
    background: #36ab60;
    padding: 3px;
    border-radius: 10px;
    color: #fff;
    }
     
  • 相关阅读:
    egrep及扩展正则
    grep命令及正则
    Linux管道及I/O重定向
    权限及权限管理
    Linux-用户管理
    Linux用户及权限
    文件名通配
    bash特性-命令历史命令行编辑
    USACO 2014 US Open Decorating The Pastures
    USACO 2014 US Open Odometer /// 枚举
  • 原文地址:https://www.cnblogs.com/lsyy2017/p/11564473.html
Copyright © 2011-2022 走看看