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;
    }
     
  • 相关阅读:
    Additional Color Tables
    How to make a non-symmetric color pallet around zero
    【cl】cmd相关命令
    【cl】oracle之Sequence
    常用命令之ps
    卸载oracle
    oracle—无法启动
    oracle 导入数据
    proc文件系统漫谈
    GStreamer插件分类
  • 原文地址:https://www.cnblogs.com/lsyy2017/p/11564473.html
Copyright © 2011-2022 走看看