在uniapp和taro中,分别用两种不同的方法实现单选全选。

在uniapp中。

首先加上checkbox标签,checkbox标签外包裹checkbox-group标签,checkbox-group标签上有@change属性,可以触发change事件,可以获取value的值。

<view class="cartlist">
        <checkbox-group @change="allselected">
          <checkbox :checked="allchecked" />全选
        </checkbox-group>
        <view class="cartitem" v-for="(item, index) of cartlist" :key="index">
          <checkbox-group @change="selected(item)">
            <checkbox :checked="item.flag" />
          </checkbox-group>
          {{ item.proname }}{{ item.price }} -- {{ item.num }}
          <text @click="reduce(item)">[-]</text> 
          <text @click="add(item)">[+]</text> 
          <text @click="del(item, index)">[del]</text> 
        </view>
      </view>

然后我们先做全选,先定义一个allselected全选事件,并在data中定义一个标识 allchecked: true。通过取反来改变选中状态,然后通过allchecked的布尔值来个遍历的列表赋予一个flag标识,来确定是否子选项是否选中。

      allselected () {
        this.allchecked = !this.allchecked
        if (this.allchecked) {
          this.cartlist.map( item => {
            item.flag = true
          })
        } else {
          this.cartlist.map( item => {
            item.flag = false
          })
        }
      }

然后单选,首先传递一个item参数,参数中有当前单选的flag标识。通过flag来判断当前项是否被选中,然后通过遍历列表,来判断是否所以的flag都为true或者都为false,以此来个allchecked赋值。

      selected (item) {
        item.flag = !item.flag
        if(!item.flag) {
          this.allchecked = false
        } else {
          const test = this.cartlist.every(item => {
            return item.flag === true
          })
          if (test) {
            this.allchecked = true
          } else {
            this.allchecked = false
          }
        }
      }

在taro中。

一样用checkboxgroup标签,标签内有onChange属性,可以写时间。
首先写全选,在onChange事件中,有一个event参数,参数中的event.detail.value标示选中状态下checkbox中value属性的值所组成的数组,我们通过判断这个数字的长度来判读,checkbox是否被选中,如果选中,我们就用map函数遍历我们的列表,把其中表示checkbox选中状态的属性都改未true,反之则相反。

<CheckboxGroup onChange={
   (event) => {
     let len = event.detail.value.length
     let flag = len === 1 ? true : false
     let list = this.state.cartlist
     list.map(item => {
       flag ? item.flag = true : item.flag = false
     })
     this.setState({
       allSelected: flag,
       cartlist: list
     })
   }
 }>
   <Checkbox checked={ this.state.allSelected } />全选
 </CheckboxGroup>

然后是单选,还是通过event.detail.value数组的长度来判断,当前选项是否点击选中,如果是,就利用index设置当前这项的falg标识为true,并用every函数,判断列表中所有项的标识是否都为true,是,则设置allchecked的标识为true,反之,亦然。

<CheckboxGroup onChange={
      (event) => {
        let len = event.detail.value.length
        let flag = len === 1 ? true : false
        let list = this.state.cartlist
        if (flag === true) {
          list[index].flag = true
          let test = list.every(val => {
            return val.flag === true
          })
          if (test) {
            this.setState({
              allSelected: true,
              cartlist: list
            }, () => {
              this.count()
            })
          } else {
            this.setState({
              allSelected: false,
              cartlist: list
            }, () => {
              this.count()
            })
          }
        } else {
          list[index].flag = false
          this.setState({
            allSelected: false,
            cartlist: list
          }, () => {
            this.count()
          })
        }
      }
    }>
      <Checkbox checked={item.flag}/>
    </CheckboxGroup>

最后,在逆战中求生存,抗击疫情,我们为武汉加油,为中国加油。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: uniapptaro 都是前端开发框架,它们之间的区别在于:uniapp 是一个以 Vue 语法为基础的跨端开发框架,可以运行在微信小程序、支付宝小程序、字节跳动小程序、QQ 小程序、APP 等终端上;而 Taro 是一个以 React 语法为基础的跨端开发框架,可以运行在微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ 小程序、APP、H5 等终端上。 ### 回答2: UniAppTaro是两个常用于开发跨平台应用的框架。它们的主要区别如下: 1. 开发语言:UniApp基于Vue.js框架,使用Vue语法进行开发;而Taro则支持多种主流框架,如React、Vue和Angular。 2. 生态支持:UniApp拥有比较成熟的生态系统,拥有丰富的插件和组件库,可以更快速地构建跨平台应用。Taro相对较新,生态系统正在逐渐完善。 3. 平台兼容性:UniApp可以同时开发iOS、Android、小程序等平台的应用,只需要编写一套代码即可。而Taro则提供了更广泛的平台支持,包括iOS、Android、小程序、H5、React Native等。 4. 性能表现:由于UniAppTaro底层机制的不同,性能表现也有所差异。UniApp在小程序和App平台上性能表现更为出色,而Taro在React Native平台上更为强大。 5. 社区支持:由于UniApp已经发展了较长时间,因此有较大的社区支持。在出现问题时,可以更快地通过社区找到解决方案。而Taro的社区相对较小,可能需要更多自行解决问题。 总的来说,UniApp更适合开发需要快速构建的跨平台应用,而Taro则更适合追求更广泛平台支持和更好性能的开发者。选择哪一个框架取决于开发者的需求和个人偏好。 ### 回答3: UNIappTaro是两个现代化的跨平台开发框架,主要用于开发小程序、H5和APP等应用。它们在一些方面有一些区别。 首先,UNIapp是由DCloud推出的开源框架,它基于Vue.js框架进行开发,使用Vue.js的语法和生态系统。而Taro是由京东凹凸实验室开发的多端统一开发框架,它也支持Vue.js语法,同时还支持React语法。 其次,关于跨平台的适配能力,UNIappTaro实现跨平台开发时有所不同UNIapp采用了一种依赖云端编译的方式,通过编写一套代码,云端编译生成小程序、H5和APP等不同平台的代码。而Taro则是将代码在编译时进行转换,生成适配不同平台的代码,这种方式更加灵活。 此外,UNIappTaro对于跨平台组件的适配也有不同实现方式。UNIapp提供了一些特定的内置组件,可以直接在不同平台上使用,也可以使用插件和扩展来增加功能。而Taro则是通过编写平台相关的组件来实现适配,需要根据不同平台的API进行编写。 最后,对于开发者来说,UNIapp相对来说更加成熟和稳定,因为它已经在市场上使用了一段时间,拥有较大的社区和资源支持。Taro相对较新,但由于京东等大公司的背书,也有一定的关注度。 综上所述,UNIappTaro在跨平台开发上有着不同实现方式和特点。开发者可以根据项目需求和个人喜好选择合适的框架进行开发。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值