微信小程序-默认选中遍历的第一个数据，且可以自由切换选中

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/83819694

效果如下：

第一步：wxml页面：

说明：list是遍历的数据，data-index="{{index}}"中index是数据的下标（0,1,2,3.....）

三元操作符需要掌握，如果index等于idx，就添加on所写的样式

<view class="ul-list {{index==idx?'active':''}}" wx:for="{{list}}" wx:key="" data-index="{{index}}" bindtap='getIndexValue'>
    <view class="ul-li">{{item.time}}</view>
 </view>

对应的样式：

.ul-list{
  width:100%;
  border-bottom: 1px solid #9e9e9e;
  height:55px;
  line-height:55px;
  text-align: center;
}
.active{
  color:red;
  box-shadow: 5px 5px 2px #888888;
}

第二步：因为遍历的数据下标从0开始，要想默认选中第一个日期，就要定义idx为0。

  data: {
    list:[{
      time:"2018-11-07"
    }, {
        time: "2018-11-08"
      }, {
        time: "2018-11-09"
      }, {
        time: "2018-11-10"
      }, {
        time: "2018-11-11"
      }],
      idx:0

  },
  getIndexValue:function(e){
    let index = e.currentTarget.dataset.index;
    //console.log(index);
    this.setData({
      idx: index
    });
  },