小程序开发——wx:for循环添加的元素怎么设置不同的样式

在编写一个页面的时候，总会遇到一组出了文字内容其它都相同的组件，这时候如果使用循环是非常方便的，微信小程序也有自己的解决方案。

我们可以通过使用wx:for='{{items}}'进行组件的重复渲染，在js文件中设置items的值就可以实现。但是，在动态地设置每一项的样式的时候，出问题了。

我们想要实现如下图所示的效果：

点击一项，背景变白，字体为橙色。在web开发中，可以直接改变style来完成相关操作，但是微信小程序不支持dom操作，只能另辟蹊径。

通过阅读官方文档，我们发现，小程序的数据绑定具有很强大的功能，可以动态地设置class名；而wx:for也拥有默认的index值，我们便可以从这方面下手。基本思路：当点击某一项的时候，我们在js中将对应index的值赋给一个变量current_item，然后通过三元运算符来判断使用哪一种样式。代码如下：

wxml：

 <view class="items {{current_item === index?'selected':' '}}"  bindtap='clicked'  
       wx:for="{{choose_items}}" data-key='{{index}}'>{{item}}  </view>

wxss：

.items{
  width: 100%;
  height: 100rpx;
  font-family: "微软雅黑";
  font-size: 32rpx;
  text-align: center;
  line-height: 100rpx;
}
.selected{
  background-color: #fff;
  color: rgb(247, 181, 120);
}

              js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    choose_items:[
      '推荐', '猜您喜欢', '热销爆款', '品质订制', '有机馆', '环球美食'
      
    ],
    current_item: 0,
  }
/**
 * 动态地给左侧导航栏添加点击变色样式
 */

  clicked:function(e){
    var that= this;
    let cuu=e.currentTarget.dataset.key;//获取index值
    console.log(cuu);
    that.setData({
      current_item: cuu
    })
  },
}

             关于index的值的获取，一个简单思路就是在wxml中把data-key的值设为{{index}}，在js文件中通过currentTarget.dataset.key就可以获取到了。具体的可以参阅官方文档中框架——事件——target的说明。