【Kevin Learn 小程序】--＞ checkbox

Kevin-Dev

已于 2022-03-15 18:29:41 修改

阅读量1.2k

点赞数

分类专栏： Android -- 小程序文章标签：小程序 checkbox

于 2020-02-19 15:35:23 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/duoduo_11011/article/details/104393964

版权

这篇博客展示了如何在小程序中实现Checkbox组件，包括组件的效果图、相关属性介绍，并提供了从app.js到checkbox.wxml的完整代码示例。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

属性

参考：checkbox

代码

app.js

//app.js
App({
   
  onLaunch: function () {
   
    console.log('App Launch')
  },
  onShow: function () {
   
    console.log('App Show')
  },
  onHide: function () {
   
    console.log('App Hide')
  },
  globalData: {
   
    hasLogin: false
  }
})

app.json

{
   
  "pages": [
    "pages/checkbox/checkbox"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

checkbox.js

Page({
   
  data: {
   
    items: [
      {
    value: 'USA', name: '美国' },
      {
    value: 'CHN', name: '中国', checked: 'true' },
      {
    value: 'BRA', name: '巴西' },
      {
    value: 'JPN', name: '日本' },
      {
    value: 'ENG', name: '英国' },
      {
    value: 'FRA', name: '法国' }
    ]
  },
  checkboxChange: function (e) {
   
    console.log('checkbox发生change事件，携带value值为：', e)

    var items = this.data.items, values = e.detail.value;
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
   
      items[i].checked = false;

      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
   
        if (items[i].value == values[j]) {
   
          items[i].checked = true;
          break
        }
      }
    }

    this.setData({
   
      items: items
    })
  }
})

checkbox.json

{
   
  "navigationBarTitleText": "checkbox组件"
}

checkbox.wxml

<!--pages/checkbox/checkbox.wxml-->
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" disabled="true"/>禁用
      </label>
    </view>

    <view class="page-section">
      <view class="weui-cells weui-cells_after-title">
        <checkbox-group bindchange="checkboxChange">
          <label class="weui-cell weui-check__label" wx:for="{
   {items}}" wx:key="{
   {item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{
   {item.value}}" checked="{
   {item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{
   {
   item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</view>

checkbox.wxss

@import "../../common/lib/weui.wxss";
.checkbox{
   
  margin-right: 20rpx;
}

weui.wxss

page {
   
  line-height: 1.6;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
   
  vertical-align: middle;
}
.weui-cells {
   
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}
.weui-cells:before {
   
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells:after {
   
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells__title {
   
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.weui-cells_after-title {
   
  margin-top: 0;
}
.weui-cells__tips {
   
  margin-top: .3em;
  color: #999999;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}
.weui-cell {
   
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.weui-cell:before {
   
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
  left: 15px;
}
.weui-cell:first-child:before {
   
  display: none;
}
.weui-cell_active {
   
  background-color: #ECECEC;
}
.weui-cell_primary {
   
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;