原生微信小程序使用class 三元运算符实现多选案例

如下图所示：

1，在vue中开发非常容易实现，使用数组的includes方法判断即可，但是在原生小程序中不可以
2，要及时的对定义的遍历进行setData，重新赋值

本案例的重点js和html代码如下：

 <view  wx:for="{{xueliArr}}" class="{{ xueliArrObj[index].flag  ?'base-item px_act':'base-item'}}" wx:key='item.id' bindtap="xueliChange"data-id="{{item.id}}"data-index="{{index}}"id="{{'xueli'+index}}">{{item.cate_name}}</view>// res是从接口返回的数据let xueliArr = res.data.data.xueli.listif(xueliArr && xueliArr.length > 0){xueliArr.forEach(item =>{this.data.xueliArrObj.push({flag:false})})this.setData({xueliArrObj: this.data.xueliArrObj})}xueliChange:function(e){let index = e.currentTarget.dataset.indexif(this.data.xueliSelArr.includes(e.currentTarget.dataset.id)){let index = this.data.xueliSelArr.findIndex(item =>{return item == e.currentTarget.dataset.id})this.data.xueliSelArr.splice(index,1) // 删除元素}else{this.data.xueliSelArr.push(e.currentTarget.dataset.id)}this.data.xueliArrObj[index].flag = !this.data.xueliArrObj[index].flagthis.setData({xueliArrObj: this.data.xueliArrObj})},

完整的wxml文件如下

<!--packageA/pages/index/select.wxml-->
<view class="select-main"><view>期望城市  ：郑州</view><view><view class="xue-title">学历要求</view><view class="flex-block"><view  wx:for="{{xueliArr}}" class="{{ xueliArrObj[index].flag  ?'base-item px_act':'base-item'}}" wx:key='item.id' bindtap="xueliChange"data-id="{{item.id}}"data-index="{{index}}"id="{{'xueli'+index}}">{{item.cate_name}}</view></view><view class="xue-title">薪资范围</view><view class="flex-block"><view  wx:for="{{salarys}}" class="{{xztab==index?'base-item px_act':'base-item'}}" wx:key='item' bindtap="salaryChange"data-id="{{index}}" id="{{index}}">{{item}}</view></view><view class="xue-title">行业分类</view><view class="flex-block"><view  wx:for="{{hangyeArr}}" class="{{xztab==index?'base-item px_act':'base-item'}}" wx:key='item.id' >{{item.cate_name}}</view></view><view class="xue-title">企业规模</view><view class="flex-block"><view  wx:for="{{qyguimoArr}}" class="{{xztab==index?'base-item px_act':'base-item'}}" wx:key='item.id' >{{item.cate_name}}</view></view><view class="btn-la"><text class="btn-bs btn-sure">确定</text><text class="btn-bs btn-reset" >重置</text></view></view></view>

完整的js代码如下


// packageA/pages/index/select.jsconst app = getApp()
const util = require('../../../utils/util.js')
const api = require('../../../utils/api.js')Page({/*** 页面的初始数据*/data: {salarys: ['全部', '面议', '1500以下', '1500-2999', '3000-3999', '4000-5999', '6000-7999', '8000-9999', '10000-14999', '15000-19999', '20000以上'],salarybase: [{ "cate_name": '全部', "cate_ceil": '0', "cate_floor": '0' },{ "cate_name": '面议', "cate_ceil": '-1', "cate_floor": '-1' },{ "cate_name": '1500以下', "cate_ceil": '1500', "cate_floor": '0' },{ "cate_name": '1500-2999', "cate_ceil": '2999', "cate_floor": '1500' },{ "cate_name": '3000-3999', "cate_ceil": '3999', "cate_floor": '3000' },{ "cate_name": '4000-5999', "cate_ceil": '5999', "cate_floor": '4000' },{ "cate_name": '6000-7999', "cate_ceil": '7999', "cate_floor": '6000' },{ "cate_name": '8000-9999', "cate_ceil": '9999', "cate_floor": '8000' },{ "cate_name": '10000-14999', "cate_ceil": '14999', "cate_floor": '10000' },{ "cate_name": '15000-19999', "cate_ceil": '19999', "cate_floor": '15000' },{ "cate_name": '20000以上', "cate_ceil": '0', "cate_floor": '20000' },],xztab: 0,floor: '',ceil: '',qzfx_i: 1,xueliSelArr:[],//学历xueliArrObj:[],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {util.request(api.getDcData, { "type": 'xueli,hangye,qyguimo' }, this.dcDataFn)},dcDataFn: function(res) {console.log("res==",res)console.log("res.data.data.hangye===",res.data.data.hangye)let xueliArr = res.data.data.xueli.listif(xueliArr && xueliArr.length > 0){xueliArr.forEach(item =>{this.data.xueliArrObj.push({flag:false})})this.setData({xueliArrObj: this.data.xueliArrObj})}this.setData({hangyeArr:res.data.data.hangye.list,xueliArr:xueliArr,qyguimoArr:res.data.data.qyguimo.list});},//点击学历xueliChange:function(e){let index = e.currentTarget.dataset.indexif(this.data.xueliSelArr.includes(e.currentTarget.dataset.id)){let index = this.data.xueliSelArr.findIndex(item =>{return item == e.currentTarget.dataset.id})this.data.xueliSelArr.splice(index,1) // 删除元素}else{this.data.xueliSelArr.push(e.currentTarget.dataset.id)}this.data.xueliArrObj[index].flag = !this.data.xueliArrObj[index].flagthis.setData({xueliArrObj: this.data.xueliArrObj})},salaryChange: function (e) {console.log(e.currentTarget.dataset.id)if (this.data.qzfx_i == 1) {this.data.floor = this.data.salarybase[e.currentTarget.dataset.id].cate_floor;this.data.ceil = this.data.salarybase[e.currentTarget.dataset.id].cate_ceil;} else {this.data.floor = this.data.salarybasesx[e.currentTarget.dataset.id].cate_floor;this.data.ceil = this.data.salarybasesx[e.currentTarget.dataset.id].cate_ceil;}this.setData({xztab: e.currentTarget.dataset.id})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

原生微信小程序使用class 三元运算符实现多选案例相关推荐

微信小程序中使用三元运算符
wxml <van-cell-group><van-cell title="昵称" value="{{userInfo.nickName}}" ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
【微信小程序】---- redux 在原生微信小程序的使用实例
weapp-redux 下载 weapp-redux 使用实例下载预览开发 1. 目标学会 redux 在原生微信小程序的使用: 学习和思考微信小程序中封装 Provider: 2. 引入 re ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换接口的url webview的前缀url 埋点相关的环境参数本地存储的环境变量配置 ...
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
原生微信小程序,scroll-view的使用,一屏两个滚动区域,scroll-y(纵向滚动) 这个会简单很多结构层 <view class="container">& ...
蚂蚁分类信息系统原生微信小程序百度小程序
蚂蚁分类信息系统原生微信小程序百度小程序,系统采用uniapp开发,小程序接口独立开发,兼容蚂蚁分类信息系统数据库.支持微信支付,百度支付
基于原生微信小程序的时间组件
作者的絮叨在开发原生微信小程序的时候,发现很少有基于原生微信小程序开发的相关插件或组件,不知道是不是我的孤陋寡闻,还是真的很少,暂且不管~下面我介绍一下我当时开发的一个时间组件,比较简陋,希望可以给 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...

原生微信小程序使用class 三元运算符实现多选案例

原生微信小程序使用class 三元运算符实现多选案例相关推荐

最新文章

热门文章