微信小程序：多个button/view组件行切换时改变样式

微信小程序中多个button/view，点击后改变状态或样式，并拿到对应参数值。该类似需求情境适用：选择购物车的尺寸或是型号（不可选、可单选）、选择套餐（单选）、选择分组（单选）等等

按照需求布局，根据数组list循环，通过if语句条件渲染，展示对应样式，其中view可换成button。

<view  class="container">
  <block wx:for="{{list}}" wx:key="{{index}}">
    <!-- <view class="flag-item"> {{item.title}} </view>  -->
    <view wx:if="{{item.stock <= 0}}" class="flag-item0" bindtap="clickedBtn" data-id="{{index}}" > {{item.title}} </view> 
     <view wx:elif="{{item.stock > 0}}" class="{{index == current_tag?'flag-item2':'flag-item1'}}" bindtap="clickedAction" data-id="{{index}}"> {{item.title}} </view> 
  </block>
</view>

在wxss文件写css样式

.container {
  background-color: #fff;
  width: 100%;
  overflow: hidden;
}
.flag-item0 {
  margin: 20rpx 2% 20rpx 2%;
  width: 20%;
  border: 1px solid gainsboro;
  float: left;
  text-align: center;
  line-height: 40px;  
  color: gainsboro;
}
.flag-item1 {
  margin: 20rpx 2% 20rpx 2%;
  width: 20%;
  border: 1px solid #000;
  float: left;
  text-align: center;
  line-height: 40px;  
}
.flag-item2 {
  background-color: red;
  margin: 20rpx 2% 20rpx 2%;
  width: 20%;
  border: 1px solid red;
  float: left;
  text-align: center;
  line-height: 40px;  
}

js文件中写对应的数据和逻辑

var networking = require('../../utils/networking.js');
var util = require('../../utils/util.js');  

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 数据列表
    list:[

      {
        id:0,
        title:"36",
        stock:10
      },
      {
        id: 1,
        title: "37",
        stock: 0
      },
      {
        id: 2,
        title: "38",
        stock: 0
      },
      {
        id: 3,
        title: "39",
        stock: 10
      },
      {
        id: 4,
        title: "40",
        stock: 6
      },
      {
        id: 5,
        title: "41",
        stock: 10
      },
      {
        id: 6,
        title: "42",
        stock: 10
      },
      {
        id: 7,
        title: "43",
        stock: 10
      },
      {
        id: 8,
        title: "44",
        stock: 0
      },
    ],
    // 当前选中的号码
    current_tag:null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 库存为0，不可选
   */
  clickedBtn: function (responseObject) {
    util.progressTips("补货中，请耐心等待")
    let that = this;
    var id = responseObject.currentTarget.dataset.id;  //获取自定义的ID值 
    console.log("current_tag", id)
    this.setData({
      current_tag: id,
    })
  },

  /**
   * 库存大于0，可选，选中变色
   */
  clickedAction: function (responseObject){
    let that = this;
    var id = responseObject.currentTarget.dataset.id;  //获取自定义的ID值 
    console.log("current_tag", id)
    this.setData({
      current_tag: id,
    })
  }

})

可以查看我的简书，具体实现代码可以参考我的GitHub switch文件中的代码。其中实现了两种方式加载，一种是下拉刷新和上拉加载结合，一种是单独的上拉加载