仿MUI UI的侧滑导航筛选

记录一下因为近期一个项目中XXX的需求要用到一个离谱的筛选组件，一开始我说筛选用下拉框就好了，但是产品和UI根据对方需求让我必须要做成图上那样，至于是哪样见图

一开始是想用MUI的，但是不想导入了就自己用笨方法做了一个，如下

<view class="select" @click="showSelect">
                <image src="../../../static/product-popup.png" mode=""></image>
                <!-- <uni-data-select :localdata="productType" v-model="typeName" @change="changeType"></uni-data-select> -->
                <!-- <u-icon name="arrow-down" size="54"></u-icon> -->
            </view>

搜索框是用的UI给我的图标，然后左边这个是用的弹出层做的

<u-popup v-model="showScreen" mode="left" :overlayStyle="popupStyle" :mask="false">
                <view class="screen-popup">
                    <view class="type-block" v-for="(item,index) in productType" :key="index"
                        :class="{ active: index === activeIndex }" @click="changeType(index,item.text)">
                        <view class="active-line" v-show="index === activeIndex"></view>
                        <view>{{item.text}}</view>
                    </view>
                </view>
            </u-popup>

逻辑是点击图标v-model="showScreen"，showScreen在data里面默认false，点击的时候就为true,然后弹出弹出层,mode="left"设置从左边弹出，当然还可以right、center、bottom、弹出。这里将:mask="false"遮罩层关闭了。然后通过@click="changeType(index,item.text)"调用接口改变右边视图里面的内容。

changeType(index, text) {
                this.activeIndex = index;
                // console.log(text)
                const page = 1,
                    size = 15,
                    typeName = text,
                    FirmId = uni.getStorageSync('FirmId');
                apiProductPageList(page, size, typeName,FirmId).then(res => {
                    // console.log(res.data)
                    this.productList = res.data
                })
            }

样式如下：

.screen-popup {
        width: 127px;
        background-color: #EFEFEF;
    }

    .active-line {
        width: 6px;
        height: 20px;
        border-radius: 3px;
        background-color: rgba(64, 149, 229, 1);
        margin-right: 16px;
    }

    .type-block {
        display: flex;
        height: 55px;
        padding: 10px;
        font-size: 16px;
        line-height: 55px;
        text-align: center;
        justify-content: center;
        transition: background-color 0.3s;
    }

    .type-block.active {
        display: flex;
        height: 55px;
        padding: 10px;
        color: #4095E5;
        font-size: 18px;
        line-height: 55px;
        text-align: center;
        align-items: center;
        transition: background-color 0.3s;
        background-color: #fff;
    }

如果你也有相同的需求可以试试0~0