微信小程序checkbox,checkbox-group多选框的简易用法,代码简洁,可复用性高

首先这是官网的用法:
代码非常的长,而且很难复用(不能多个复选框共用这个checkboxChange方法)

<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>
Page({
  onShareAppMessage() {
    return {
      title: 'checkbox',
      path: 'page/component/pages/checkbox/checkbox'
    }
  },

  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ]
  },

  checkboxChange(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)

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

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

    this.setData({
      items
    })
  }
})

划分线,下面是更好的写法


触发checkboxChange的时候传一个key值过去,之后值对应的是一个新数组(与下面wx:for的数组不同),用来存放已选择的项

<wxs module="v1">
	var  include = function(array,value) {
	    var has = false;
	    for (var i = 0; i < array.length; ++i) {
	        if (array[i] == value){
	            has = true;
	            return has
	        }
	    }
	    return has;
	 }
  module.exports.include =  include;
</wxs>

<checkbox-group bindchange="checkboxChange" data-key="selectedArray">
  <label wx:for="{{myArray}}" wx:key="index" >
       <view>
         <checkbox value="{{item.value}}" checked="{{v1.include(selectedArray,item.value)}}"/>
       </view>
       <view>{{item.name}}</view>
     </label>
 </checkbox-group>

因为 微信小程序中我们不能直接在wxml模板中使用includes方法(真是够落后的),所以只能用<wxs>自己定义一个,然后checked这样写,如果checked="{{item.checked}}"的话,选中状态的页面效果将不会存储起来.

为什么不用

var  include = function(array,value) {
    return array.indexOf(value) > -1
 }

来实现include效果,因为传值的时候默认会把数字转成字符串传过去,[“1”,“2”].indexOf(2)就等于-1了,用上面的方法就避免了这个情况

data:{
	myArray:[
      {value: 'v1', name: '菠萝'},
      {value: 'v2', name: '叉烧'},
    ],
    selectedArray: [],
},
checkboxChange(e) {
   let { key } = e.currentTarget.dataset;
   this.setData({
     [key]: e.detail.value
   })
 }

这里checkboxChange的意思就是把选中的值赋给我们传进来的参数(数组)
非常简洁,最重要的是,不管我们写了多少组checkbox-group,都能直接复用这个方法

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序checkbox-group可以用来实现购物车功能。购物车通常会展示用户已选择的商品,并且允许用户对选择的商品进行编辑、删除等操作。 首先,我们可以使用checkbox-group组件来展示用户可选的商品列表。每个商品可以用一个checkbox和相应的label展示。用户可以通过勾选checkbox来选择要购买的商品。 在选择完商品后,我们可以通过checkbox-group的bindchange事件来监听用户的选择变化。在该事件的处理函数中,我们可以获取到用户选择的商品的信息。可以将这些信息保存在一个数组中,用于在购物车中展示已选择的商品。 接下来,我们可以使用一个列表展示购物车中的商品。在列表中,我们可以展示商品的图片、名称、价格等信息。同时,我们还可以在每个商品后面添加一个删除按钮,供用户删除不再需要的商品。 当用户点击删除按钮时,我们可以根据商品的索引或唯一标识从购物车中移除该商品,并更新购物车的展示。 除了展示已选择的商品和删除商品,我们还可以在购物车中展示商品的数量,并提供加减按钮供用户调整商品的数量。用户可以点击加减按钮来增加或减少商品的数量。同时,我们还可以根据商品的数量和价格计算出该商品的小计,并在购物车中展示。 最后,我们可以在购物车底部添加一个结算按钮,供用户点击进入结算页面。用户可以在结算页面确认购买的商品和总金额,并填写收货地址等信息。 总之,通过微信小程序checkbox-group组件,我们可以很方便地实现购物车功能,让用户可以方便地选择和管理购买的商品。 ### 回答2: 微信小程序checkbox-group组件可以用于实现购物车的功能。首先,在页面的wxml文件中,可以使用checkbox-group组件来创建一个购物车列表,每个商品项都有一个对应的checkbox。 例如: ``` <checkbox-group bindchange="checkboxChange"> <block wx:for="{{cartList}}"> <checkbox value="{{item.id}}"></checkbox> <view>{{item.name}}</view> <view>{{item.price}}</view> </block> </checkbox-group> ``` 在js文件中,需要定义一个cartList数组来存储购物车中的商品信息,并添加相应的事件处理函数checkboxChange来实现选中和取消选中商品的操作。 例如: ``` Page({ data: { cartList: [ { id: 1, name: "商品1", price: 10 }, { id: 2, name: "商品2", price: 20 }, // 其他商品项 ] }, checkboxChange(e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) // 可以在这里根据checkbox的选中状态来更新购物车中商品的选中状态 } }) ``` 在checkboxChange函数中,可以获取到checkbox选中的商品的value值,可以通过遍历cartList数组来找到对应的商品项,并更新选中状态。 最后,可以根据需求在购物车中添加结算按钮,点击结算按钮可以获取到购物车中选中的商品的信息,进行下一步的操作。 ### 回答3: 微信小程序中的checkbox-group组件可以用于实现购物车的功能。购物车一般用于将用户选择的商品添加到购物车中,方便用户统一管理和结算。 首先,在小程序中创建一个页面,页面上包含一个checkbox-group组件和一个结算按钮。checkbox-group组件用于展示用户可以选择的商品列表,每个商品都有对应的checkbox。用户可以通过勾选checkbox的方式选择要购买的商品,勾选的商品会被添加到购物车中。 接下来,通过小程序框架提供的数据绑定机制,将商品的勾选状态与数据关联起来。可以使用一个数组来保存用户选择的商品信息,数组中的每个元素包含商品的相关信息和一个表示勾选状态的标志位。当用户勾选或取消勾选某个商品的时候,可以通过改变数组中相应元素的标志位来表示选中或未选中的状态。 在结算按钮的点击事件中,遍历数组,筛选出被勾选的商品,然后可以进行相关的结算操作,如计算总价、生成订单等。 在购物车页面中,可以展示被勾选的商品列表,以供用户查看和管理。用户可以通过点击checkbox来修改商品的勾选状态,然后可以进行批量删除、修改数量等操作。 最后,在小程序中加入其他必要的功能,如商品的增加、删除、数量修改等,以供用户更好地管理购物车。 总之,通过使用微信小程序中的checkbox-group组件,我们可以轻松实现购物车功能,方便用户管理和结算商品。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值