Suddenly there was a need for the uView component library. Xiao Bai is very panicky. After searching for various solutions and failing, he decides to tear one by hand. Actually no > have imagined difficulty.

Let’s see what happens first

-_ – | | not inserted into the video The only pictures

The first three are the same (top)

HTML (uniapp+uView) <view class="dropdown-item u-p-l-15 u-p-r-15" :class="{'isActive': isActive ===' collate '? </view> <view class="dropdown-item u-flex u-p-l-15 u-p-r-15" :class="{'isActive': isActive ===' floor '? }"@click="fan(' fan ')"> </text> <view class="u-flex uicon"> <u-icon name=" arrow-upfill" :class="{'highLight':isFloor}"></u-icon> <u-icon name="arrow-down-fill" :class="{'highLight':isFloor===false}"></u-icon> </view> <view class="dropdown-item u-flex" @click="fan(' use ')"> </view> <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>Copy the code

About the highlighted

The first three dynamic class names of dropdown-item are all isActive. The middle two dynamic class names of dropdown-item are “icon” and “highLight”, but different variables are used to control whether the dynamic class is highlighted

About the switch

① Use the same fan function and pass in arguments. (2) Since the first three items are mutually exclusive, it is necessary to assign a null value to the corresponding variables that control the rest of the highlighting.

fan(data){ this.isactive = data; // Switch (data) {case "collate ": this.isFloor = null; // This. EptArea = null; // control the 'idle area' highlighted variable this.sort(); // Execute the code block break; . }}Copy the code

About Usage Module

1) isUsage control module display && ‘purpose’ on the right side of the small triangle shows the ‘triangle of the | |’ triangle of the (2) it is important to note that ‘all’ relations with the rest of the modules are incompatible; Be careful when processing data; I use an isSelect variable to control

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>
Copy the code
SelectItem: [{name: "all", isSelect: true,}, {name: "office", isSelect: false,}, {name: "shop", isSelect: false,}, {name: "Food ",isSelect: false,}, {name:" business ",isSelect: false,}, {name: "business ",isSelect: false,}, {name:" medical ",isSelect: false,}, {name: "medical ",isSelect: false,} false,}, ] usaged(item, Index) {if (index === 0) {isSelect must be 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 {// select =true this.selectitem [0].isSelect = false; this.selectItem[index].isSelect = ! this.selectItem[index].isSelect } }Copy the code

The end! Thanks for watching! If you like it, you can give it a thumbs up