微信小程序单选按钮组

最新推荐文章于 2024-04-16 13:42:38 发布

阿泽Kze_

最新推荐文章于 2024-04-16 13:42:38 发布

阅读量500

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/Wangyuan_wo/article/details/127068327

版权

背景

由于业务需要，需实现一个微信小程序的按钮组，微信小程序原本那个单选不符合预期，于是我便封装了一个组件

最终效果

代码位置

组件目录

组件代码

index.wxml

<view class="checkboxGroup">
  <view class="{{curIndex==item[key]? 'active':''}} checkbox" wx:for="{{data}}" id="{{item.id}}" wx:key="index" bindtap="toggleCheckbox">{{item.name}}</view>
</view>

index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array
    },
    key:{
      type:String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    curIndex: 1,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toggleCheckbox(e) {
      let idx = parseInt(e.currentTarget.id);
      this.setData({
        curIndex: idx
      })
      this.triggerEvent('onchange', idx)
    }
  }
})

index.wxss

.checkboxGroup{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: 15rpx;
}

.checkboxGroup .checkbox{
  min-width: 120rpx;
  padding: 0 20rpx;
  height: 68rpx;
  background-color: #f8f8f8;
  border-radius: 2px;
  font-size: 34rpx;
  letter-spacing: 0px;
  color: #000000;
  line-height: 68rpx;
  text-align: center;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}

.checkboxGroup .checkbox.active{
  min-width: 120rpx;
  height: 68rpx;
  padding: 0 20rpx;
  background-color: #00b649;
  border-radius: 2px;
  font-size: 34rpx;
  letter-spacing: 0px;
  color: #ffffff;
  line-height: 68rpx;
  text-align: center;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}

index.json

{
    "component": true
}

使用

<checkboxGroup data="{{data}}" key="id" bind:onchange="chooseStopReason"></checkboxGroup>

Page({
  data: {
    data: [{id:'1',name:'停机原因1'},{id:'2',name:'停机原因2'},{id:'3',name:'停机原因3'},{id:'4',name:'停机原因4'},{id:'5',name:'停机原因5'},{id:'6',name:'停机原因6'},{id:'7',name:'停机原因7'},{id:'8',name:'停机原因8'},{id:'9',name:'停机原因9'},{id:'10',name:'停机原因10'},],
  },
  chooseStopReason(e){
    console.log(e.detail)
  }
})