微信小程序中多个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文件中的代码。其中实现了两种方式加载，一种是下拉刷新和上拉加载结合，一种是单独的上拉加载
