如图:
众所周知,在小程序中,并不可以像PC端那样, 在WXML中使用 include方法, 但是小程序提供了WXS.
思路: JS中提供一个ids数组中,每点击一个标签,就将标签放入到ids,在每一个标签都调用WXS模块includes方法,判断是否在ids里,从而改变样式.
以下为DEMO:
目录:
tools.wxs
var include = function (index, array) {
for (var i = 0; i < array.length; ++i) {
if (array[i] === index) {
return true;
}
}
// console.log(index + ':' + flag);
return false;
}
module.exports.include = include;
index.js
// page/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
ids:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 点击最全案例标签
clickTag: function (e) {
var self = this;
var id = e.currentTarget.dataset.id; // 选中的id
var flag = true; //用于判断ids中是否存在了选中的标签id
for (var i = 0; i < self.data.ids.length; i++) { //判断是否存在ids中
if (self.data.ids[i] === id) {
self.data.ids.splice(i, 1); // 已经选择了就移除
self.setData({ // 重新渲染
ids: self.data.ids
})
flag = false;
break; // 如果已经存在,一定要终止循环
}
}
if (flag) { // 不存在,则添加id
self.data.ids.push(id);
self.setData({
ids: self.data.ids
})
}
console.log(self.data.ids);
},
})
index.xml
<!-- page/index/index.wxml -->
<!-- 导入wsx模块 -->
<wxs src="./../tools.wxs" module="tools" />
<view bindtap="clickTag"
data-id="id-1" class="{{tools.include('id-1',ids)?'case-yq-tab_active':'case-yq-tab'}}">标签1</view>
<view bindtap="clickTag"
data-id="id-2" class="{{tools.include('id-2',ids)?'case-yq-tab_active':'case-yq-tab'}}">标签2</view>
<view bindtap="clickTag"
data-id="id-3" class="{{tools.include('id-3',ids)?'case-yq-tab_active':'case-yq-tab'}}">标签3</view>
<view bindtap="clickTag"
data-id="id-4" class="{{tools.include('id-4',ids)?'case-yq-tab_active':'case-yq-tab'}}">标签4</view>
index.wxss
/* page/index/index.wxss */
.case-yq-tab{
/* width: 22%; */
padding: 20rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
color:rgba(232,84,30,1);
background: #fff;
height: 45%;
font-size: 11px;
margin-right: 1.5%;
margin-top:1.5%;
border-radius: 4px;
}
.case-yq-tab_active{
/* width: 22%; */
padding: 20rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
color:#fff;
background: rgba(232,84,30,1);
height: 45%;
font-size: 11px;
margin-right: 1.5%;
margin-top:1.5%;
border-radius: 4px;
}