小程序 顶部筛选栏 排序筛选 选择条件筛选

老板一句令下,又重构了~
忽然来了一个超出uView组件库的需求.小白甚是惊慌.在寻求多种解决方案失败后,决定自己手撕一个.其实没>有想象中困难.

咱先看效果吧

-_-|| 不会插入视频 只能插图了

前三项都是一样的(上码)

html(uniapp+uView)
<view class="dropdown-item  u-p-l-15 u-p-r-15" :class="{'isActive':isactive==='综合排序'?true:false}" @click="fan('综合排序')">综合排序</view>

<view class="dropdown-item u-flex u-p-l-15 u-p-r-15" :class="{'isActive':isactive==='所在楼层'?true:false}"@click="fan('所在楼层')">
    <text>所在楼层</text>
    <view class="u-flex uicon">
        <u-icon name="arrow-up-fill" :class="{'highLight':isFloor}"></u-icon>
        <u-icon name="arrow-down-fill" :class="{'highLight':isFloor===false}"></u-icon>
    </view>
</view>

<view class="dropdown-item u-flex" @click="fan('用途')">
    <text>用途</text>
    <view class="u-flex uicon ">
            <u-icon name="arrow-down " v-if="isUsage===false" class="u-font-13"></u-icon>
            <u-icon name="arrow-up " class="highLight u-font-13" v-else></u-icon>
    </view>
</view>

关于高亮

① 每个项都使用统一的类名 dropdown-item 前三项动态类名均为isActive
② 中间两项决定升降序的小三角使用icon,点击的动态类名均为highLight,但要使用不同变量控制是否高亮

关于切换

① 使用同一个fan函数,传入参数.由参数判断执行对应函数
② 注意点是,由于前三项是互斥关系,所以需要将控制其余高亮的对应变量赋予一个null值.(上码)

fan(data){
    this.isactive = data; //控制前三项高亮的变量
    switch (data) {
    case "综合排序":
        this.isFloor = null; //控制'所在楼层'高亮的变量
        this.eptArea = null; //控制'闲置面积'高亮的变量
        this.sort(); //对应执行代码块
        break;
        ...
     }
}

关于用途模块

① isUsage 控制 模块展示 && '用途' 右边的小三角显示 '上三角' || '下三角'
② 值得注意的是,'全部'与其余的模块是互斥关系;在处理数据时要注意一下;我使用了一个isSelect变量去控制

html
<view class="usage-box" v-show="isUsage">
    <view class="selectItem" :class="{'selectActive':item.isSelect}" v-for="(item,index) in selectItem" :key="index" @click="usaged(item,index)">{{item.name}}  </view>
</view>

selectItem: 
    [
        {name: "全部",isSelect: true,},
        {name: "办公",isSelect: false,},
        {name: "商铺",isSelect: false,},
        {name: "餐饮",isSelect: false,},
        {name: "商务",isSelect: false,},
        {name: "商业",isSelect: false,},
        {name: "医疗",isSelect: false,},
    ]
    
usaged(item, index) {
    if (index === 0) {
    //判断点击是第一个的话就其他isSelect必须为false
        this.selectItem = this.selectItem.map((ele, index) => {
            if(index === 0) {
                return {name: ele.name,isSelect: true} ;
            }else{
                return {name: ele.name,isSelect: false} ;
            }
        })
    } else {
        //否则直接固定第一个为false,点击选中的则isSelect=true
        this.selectItem[0].isSelect = false;
        this.selectItem[index].isSelect = !this.selectItem[index].isSelect
    }
}

结束 ! 谢谢观看 ! 喜欢的可以点赞呐 ~