小程序如何进行多标签选择( WXS )

如图: 

众所周知,在小程序中,并不可以像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;
}