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

最新推荐文章于 2024-07-12 18:20:19 发布

原创最新推荐文章于 2024-07-12 18:20:19 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

微信专栏收录该内容

5 篇文章

订阅专栏

此博客展示了如何在原生微信小程序中使用class和三元运算符实现多选功能，通过遍历数组并更新数据状态，利用bindtap事件处理选择逻辑。重点在于处理数据数组的flag状态和setData更新视图。

原生微信小程序使用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.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文件如下

<!--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.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 () {

  }
})