[小程序]接收后台数据并循环展示，实现单击样式发生改变

最新推荐文章于 2024-03-21 16:56:55 发布

饭碗不保啊

最新推荐文章于 2024-03-21 16:56:55 发布

阅读量277

点赞数

文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_72709530/article/details/126706117

版权

本文介绍如何使用wx:if条件语句在WXML中根据不同接口数据实现设备状态（停止、下卷/收拢、上卷/展开）的视觉展示，并通过绑定事件处理函数调整设备状态。代码展示了如何根据item.stateSwitch值动态显示图标和文字，以及触发状态变更的事件处理逻辑。

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

三种样式分别对应三个wx:if

接口数据：

代码如下：

.wxml(用item.stateSwitch的值来判断三种状态)

0 - 停止

1-下卷/收拢

2-上卷/展开

<view wx:for="{{regInfos}}" wx:key="id">
   <!-- 0-停止  1-下卷/收拢 2-上卷/展开 -->
   <view wx:if="{{item.enName=='motor' && item.stateSwitch==0 ||item.enName=='insun'&&     
     item.stateSwitch==0 ||item.enName=='outsun'&& 
     item.stateSwitch==0||item.enName=='window'&& item.stateSwitch==0}}">
     <view class="o2">
       <image class="jm" src="{{imgurl2}}{{item.enName}}_{{stateDev[index]-1}} 
       {{suffix}}"> </image>
       <text class="o3">{{item.name}}</text>
       <view class="hb">
         <text class="o6">{{item.stateSwitch_}}</text>
         <view class="scj" >
           <view class="gaibian1">{{item.switchType[0]}}{{item.switchType[1]}}</view>
           <view class="anniu2" bindtap="s1" data-index='{{index}}'> 
           {{item.switchType[3]}}{{item.switchType[4]}}</view>
           <view class="anniu3" bindtap="s2" data-index='{{index}}'> 
           {{item.switchType[6]}}{{item.switchType[7]}}</view>
         </view>
        </view> 
      </view>
    </view>
    <view wx:if="{{item.enName=='motor' && item.stateSwitch==1 ||item.enName=='insun'&& 
    item.stateSwitch==1 ||item.enName=='outsun'&& 
    item.stateSwitch==1||item.enName=='window'&& item.stateSwitch==1}}">
       <view class="o2">
        <image class="jm" src="{{imgurl2}}{{item.enName}}_{{stateDev[index]-1}} 
        {{suffix}}"></image>
        <text class="o3">{{item.name}}</text>
        <view class="hb">
          <text class="o6">{{item.stateSwitch_}}</text>
          <view class="scj">
            <view class="anniu1" bindtap="s0" data-index='{{index}}'> 
            {{item.switchType[0]}}{{item.switchType[1]}}</view>
            <view class="gaibian2">{{item.switchType[3]}}{{item.switchType[4]}}</view>
            <view class="anniu3" bindtap="s2" data-index='{{index}}'> 
            {{item.switchType[6]}}{{item.switchType[7]}}</view>
          </view>
        </view> 
       </view>
    </view>
    <view wx:if="{{item.enName=='motor' && item.stateSwitch==2 ||item.enName=='insun'&& 
     item.stateSwitch==2 ||item.enName=='outsun'&& 
     item.stateSwitch==2||item.enName=='window'&& item.stateSwitch==2}}">
        <view class="o2">
           <image class="jm" src="{{imgurl2}}{{item.enName}}_{{stateDev[index]-1}} 
           {{suffix}}"></image>
           <text class="o3">{{item.name}}</text>
           <view class="hb">
               <text class="o6">{{item.stateSwitch_}}</text>
               <view class="scj">
                 <view class="anniu1" bindtap="s0" data-index='{{index}}'> 
                 {{item.switchType[0]}}{{item.switchType[1]}}</view>
                 <view class="anniu2" bindtap="s1" data-index='{{index}}'> 
                 {{item.switchType[3]}}{{item.switchType[4]}}</view>
                 <view class="gaibian3">{{item.switchType[6]}}{{item.switchType[7]}} 
                 </view>
           </view>
        </view> 
    </view>
</view>
</view>

.o2{
  width: 750rpx;
  height: 128rpx;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
}
.o2 .jm{
  width: 64rpx;
  height: 60rpx;
}
.o2 .o3{
  width: 250rpx;
  height: 29rpx;
  padding-left: 10rpx;
  font-size: 30rpx;
  font-weight: bolder;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 8rpx;
}
.o2 .hb{
  display: flex;
  align-items: center;
  padding-left: 55rpx;
}
.hb .o6{
  color: #00b3ea;
  padding-right: 10rpx;
  font-size: 28rpx;
}
.hb .scj{
  display: flex;
}
.hb .scj .gaibian1{
  font-size: 24rpx;
  font-weight: normal;
  width: 80rpx;
  height: 60rpx;
  color: #ffffff;
  background-color: #00b3ea;
  border: solid 1px #00b3ea;
  border-radius: 30px 0px 0px 30px;
  text-align: center;
  line-height: 60rpx;
}
.hb .scj .anniu1{
  font-size: 24rpx;
  font-weight: normal;
  color: #999999;
  width: 80rpx;
  height: 60rpx;
  color: #999999;
  border-radius: 30px 0px 0px 30px;
  border: solid 1px #00b3ea;
  text-align: center;
  line-height: 60rpx;
}

.hb .scj .gaibian2{
  font-size: 24rpx;
  font-weight: normal;
  color: #ffffff;
  width: 80rpx;
  height: 60rpx;
  background-color: #00b3ea;
  border-radius: 0px 0px 0px 0px;
  border: solid 1px #00b3ea;
  text-align: center;
  line-height: 60rpx;
  border-left:0px;
}
.hb .scj .anniu2{
  font-size: 24rpx;
  font-weight: normal;
  color: #999999;
  width: 80rpx;
  height: 60rpx;
  color: #999999;
  border-radius: 0px 0px 0px 0px;
  border: solid 1px #00b3ea;
  text-align: center;
  line-height: 60rpx;
  border-left:0px;
}
.hb .scj .gaibian3{
  font-size: 24rpx;
  font-weight: normal;
  color: #ffffff;
  width: 80rpx;
  height: 60rpx;
  background-color: #00b3ea;
  border-radius: 0px 30px 30px 0px;
  border: solid 1px #00b3ea;
  text-align: center;
  line-height: 60rpx;
  border-left:0px;
}
.hb .scj .anniu3{
  font-size: 24rpx;
  font-weight: normal;
  color: #999999;
  width: 80rpx;
  height: 60rpx;
  color: #999999;
  border-radius: 0px 30px 30px 0px;
  border: solid 1px #00b3ea;
  text-align: center;
  line-height: 60rpx;
  border-left:0px;
}

  s0(e){
     //获取当前点击的下标
     var Index=e.currentTarget.dataset.index;
     //data中获取列表
     var regInfos1=this.data.regInfos;
     for(let i in regInfos1){
       if(i==Index){
        regInfos1[i].stateSwitch=0,
     regInfos1[i].stateSwitch_='已'+regInfos1[i].switchType[0]+regInfos1[i].switchType[1]
       }
     }
      //数组重新赋值
      this.setData({
       regInfos: regInfos1
     })
  },
  s1(e){
    //获取当前点击的下标
    var Index=e.currentTarget.dataset.index;
    //data中获取列表
    var regInfos1=this.data.regInfos;
    for(let i in regInfos1){
      if(i==Index){
       regInfos1[i].stateSwitch=1,
    regInfos1[i].stateSwitch_='已'+regInfos1[i].switchType[3]+regInfos1[i].switchType[4]
      }
    }
     //数组重新赋值
     this.setData({
      regInfos: regInfos1
    })
  },
  s2(e){
    //获取当前点击的下标
    var Index=e.currentTarget.dataset.index;
    //data中获取列表
    var regInfos1=this.data.regInfos;
    for(let i in regInfos1){
      if(i==Index){
      regInfos1[i].stateSwitch=2,  
     regInfos1[i].stateSwitch_='已'+regInfos1[i].switchType[6]+regInfos1[i].switchType[7]
      }
    }
    //数组重新赋值
    this.setData({
      regInfos: regInfos1
    })
  },

注释：

关键点在于获取当前点击的下标：e.currentTarget.dataset.index（）

根据选中的下标值来改变样式

在.wxml里一定要加上data-index='{{ }}'