Alipay Mini プログラム すべてのイベントを選択

<!-- axml代码段 -->
<view  onTap="aa">
    <am-icon type="{
    
    {allselect}}" color="red" size="42rpx;"/>
 <view>
   全选
 </view>
 </view>
 <block a:for="{
    
    {bb}}">
 <view  onTap="bb" data-index="{
    
    {index}}">
    <am-icon 
    type="{
    
    {item.select}}" 
    data-index="{
    
    {index}}" 
    data-select="{
    
    {item.select}}"
    color="red"
    size="42rpx;"/>
    <view>
      {
    
    {
    
    item.name}}
    </view>
 </view>
 <block>

//javascript代码段
Page({
    
    
data:{
    
    
  bb:[
      {
    
    
      select:"circle",
      name:"单选"
      },
       {
    
    
      select:"circle",
      name:"单选"
      },
      {
    
    
      select:"circle",
      name:"单选"
      },
       {
    
    
      select:"circle",
      name:"单选"
      },
  ],
     allselect:"circle",
     
  },
  bb(e){
    
    
    
    var index=e.target.dataset.index
    var select=this.data.bb[index].select
    // console.log(select)
    // console.log(this)
    // console.log(e)
    if(select =="circle"){
    
    
      type="selected"
           var type="selected"
    }else{
    
    
       type="circle"
       var type="circle"
    }
    var newList=this.data.bb
     newList[index].select = type
    this.setData({
    
    
       bb:newList
    })

    // console.log(this.data.bb);
  let result=  !newList.some(item=>{
    
    
     return item.select==='circle'
    })
    // console.log();
    
      this.setData({
    
    
        allselect:result?'selected':'circle'
      })
    
  },
  //全选
aa(e){
    
    
  //  console.log(e)
  //  console.log(this)
   var allselected=this.data.allselect
   var newList=this.data.bb
  //  console.log(allselected)
  //  console.log(newList)
   if(allselected =="circle"){
    
    
     for(var i=0;i<newList.length;i++){
    
    
              newList[i].select="selected"
     }
     var select="selected"
   }else{
    
    
        for(var i=0;i<newList.length;i++){
    
    
          newList[i].select="circle"
        }
        var select="circle"
   }
   this.setData({
    
    
      bb:newList,
      allselect:select
   })
},

});

おすすめ

転載: blog.csdn.net/weixin_51110842/article/details/115697382