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

不念不忘少年蓝@ 2022-09-04 09:48 358阅读 0赞

如下图所示：  
![在这里插入图片描述][878a5920899246fd9bb91ebae8b21933.png]  
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.list
        if(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.index
        if(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].flag
        this.setData({
          xueliArrObj: this.data.xueliArrObj
        })
      },

完整的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.js
    
    const 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.list
        if(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.index
        if(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].flag
        this.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 () {
    
      }
    })

[878a5920899246fd9bb91ebae8b21933.png]: /images/20220829/c200b64cee224b078c1206de7b1f940e.png