小程序房产项目中的标签多选

这是一个房产项目的多选标签的一个小功能；效果图就是博客最下方的图片，可以选中多个标签；

思路

我个人的思路是用一个值来控制这个标签是否是选中状态，当states为1的时候是选中状态，states为0的时候是未选中状态；
首先在获取列表的时候，先把第一项的值改成states=1，然后把该数组展示在页面上；
然后在点击时候获取到点击的这个标签的id和其他属性（看实际需求）；

实现

处理数组

首先使用小程序的ajax获取到列表信息，并且改变数组第一项的states为1；
//  res.data.data.fybiaoqian是后台返回的标签数据；
var lists = res.data.data.fybiaoqian;
 for (let j = 0; j < lists.length; j++) {
//  循环这个数组，让这个数组的第一项为1，也就是页面默认选中第一项；
   lists[0].states = 1;
 }
 //  _this  是在ajax外部定义的this；
_this.setData({
    lists:  lists
})

页面展示

<view class="lineb">
	<view class="lineb_left">房源标签</view>
		<view class="biaozu">
		<!--使用三目运算符，判断该标签使用哪个class名；如果states==1就用_left（橙色），否则用left(灰色)  -->
			<view class="box-container {{item.states==1?'_left':'left'}}" wx:for="{{lists}}" wx:key="index">
				<view bindtap='showTips' data-lxid='{{item.lxid}}' data-index="{{index}}">{{item.lxming}}
				</view>
			</view>
		</view>
</view>

点击事件

  showTips(e) {
    var index = e.currentTarget.dataset.index;   //选中状态index;
    var lists = this.data.lists;    // 页面展示的数组；
    var states = lists[index].states;  // 选中状态的状态值；
    var idsArr = [];    // 保存选中数据的数组；
    var idss = [];      // 保存选中数据的id数组；
    var ids = "";       // 选中状态下的id字符串；
    /* 
	* 当第一次点击的时候是states为undefined（因为获取数组的时候只改变了第一项的states为1）；
	* states变为1（也就是橙色选中状态），然后再点击，变为0（也就是灰色未选中状态）；
    */
    if (states == undefined || states == 0) {
      lists[index].states = 1;
    } else {
      lists[index].states = 0;
    }
    // 使用filter筛选出选中状态的值，保存到idsArr数组中；
    idsArr = lists.filter(function (element, index, all) {
      return element.states == 1;
    })
	//  循环筛选之后的值，把他们的id插入到idss数组中；
    for (let i = 0; i < idsArr.length; i++) {
      idss.push(Number(idsArr[i].lxid))
    }
	// 使用join方法，把数组转换为字符串，可以将ids传给后台；
    ids = idss.join(",");
    this.setData({
      lists: lists,
      select_ids: ids
    })
  },

效果图

来源：oschina

链接：https://my.oschina.net/clearcode/blog/4338882

标签

微信小程序

element