微信小程序列表渲染点击增添或移除类以改变

最新推荐文章于 2023-03-11 11:35:58 发布

lfkabb

最新推荐文章于 2023-03-11 11:35:58 发布

阅读量593

点赞数 2

CC 4.0 BY-SA版权

文章标签：小程序 wx:for 循环点击添加与移除类

本文链接：https://blog.youkuaiyun.com/lfkabb/article/details/88849455

本文介绍了一个使用WXML和WXSS实现的导航栏交互效果案例。点击导航栏时，选中项的文字颜色变为橙色并出现下划线。通过JS控制样式切换，并在下方展示相应的订单状态。适用于小程序开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是这样的：

要做成这样的效果：当点击上面的导航栏时颜色会变成橙色，下面多出一条下划线，不点时默认是第一个。当然下面也会随之发生变化（需要从后台获取数据后渲染，这里默认暂无订单）。

wxml 代码如下：

<view class='header'> <!--头部菜单-->
  <view bindtap='checkCloumn' wx:for="{{datas}}" data-key='{{index}}' class='headColumn                         
 {{item.state==1?"active":""}}'>
    <text>{{item.name}}</text> 
  </view>
</view>
 <!--图片和暂无订单-->
<view class='orderBody'>
  <image src='../../images/zanwudingdan.png'></image>
  <view class='noOrder'>暂无订单</view>
</view>

wx:for 是循环。循环渲染{{datas}} 里的数据。 data-key ="{{index}}",每条数据里的data-key都不一样，分别为 0,1,2,3。

后面的 e.currentTarget.dataset.key 就是分别获得每次点击的data-key。

js:

data: {
    datas:[
      {name:"全部",state:"1"}, //数据渲染，将第一个设置为默认的active。
      { name: "代付款",state:"0" },
      { name: "可使用", state: "0" },
      { name: "退款/售后", state: "0"}
    ]
  },
  checkCloumn:function(e){  //点击事件
    for(var i =0;i<this.data.datas.length;i++){
      this.data.datas[i].state=0
    }  //循环让 state =0，也是移除 active 类。
    var index = e.currentTarget.dataset.key; 
    // console.log(index);
    this.data.datas[index].state=1; //点击使 state=1 ，也是添加 active 类。
    this.setData({
      datas:this.data.datas
    })
  },

wxss:

page{
  background: #f8f8f8;
}
.header{
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: #ddd 2px 4px 20px;
}
.header .headColumn{
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  float: left;
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
.header .headColumn text{
  padding: 30rpx 0;
}
.header .active text{
  color: #ff6336;
  border-bottom:solid #ff6336 1px;
}
.orderBody{
  width: 200rpx;
  height: 200rpx;
  margin: 200rpx auto;
  overflow: hidden;
}
.orderBody image{
  width: 200rpx;
  height: 150rpx;
}
.orderBody .noOrder{
  text-align: center;
  color: #666;
  font-size: 28rpx;
  /* margin-top: 20rpx; */
}