本文主要是介绍uniapp升降排序点击的dom变换设置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
简单记录 以备不时之需
目录
dom
css
methods方法
dom
先把tabbar写出来，这里v-for的是请求的数据，模拟的话随便编个数组就行了
<template><view><view class="tab"><view v-for="(item,index) in screen.list" class="tab-item "><text class="tab-txt" >{{item.name}}</text><view class="icon"><view class="iconfont icon-shengxu"></view><view class="iconfont icon-jiangxu"></view></view></view><text class="tab-item tab-txt">筛选</text></view></view>
</template>css
设置下dom的样式，可能有废操作，不给过不打紧
<style scoped>
//阿里图标库找的图标
@font-face {font-family: "iconfont";src: url('@/static/font/iconfont.ttf?t=1626747505838') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 32rpx;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;line-height: 14rpx;color: lightgray;}.icon-jiangxu:before {content: "\e6cc";}.icon-shengxu:before {content: "\e6cf";}
//切换颜色备用的css.red {color: red;}.gray {color: lightgray;}
//备用内容到此.tab {width: 100%;height: 88rpx;display: flex;justify-content: center;}.tab-item {display: inline-flex;width: 20%;height: 88rpx;margin: 0 20rpx;}.tab-txt {line-height: 88rpx;}.icon {display: flex;flex-direction: column;justify-content: center;}
</style>methods方法
先把配套需要的数据写了，前两篇blog都给忘了
data() {return {screen: {currentIndex: 0,list: [{name: "综合",status: 0,key: 'all'},{name: "销量",status: 0,key: 'sale_count'},{name: "价格",status: 0,key: 'min_price'},],},}},然后给dom元素绑定事件和动态class（相较一开始的dom代码内容有所改动）
<view class="tab"><view v-for="(item,index) in screen.list" class="tab-item "><text class="tab-txt" :class="screen.currentIndex===index?'red':'gray'"@click="toggleclass(index)">{{item.name}}</text><view class="icon"><view class="iconfont icon-shengxu" :class="item.status===1?'red':'gray'"></view><view class="iconfont icon-jiangxu" :class="item.status===2?'red':'gray'"></view></view></view><text class="tab-item tab-txt">筛选</text></view>最后在methods里写方法
toggleclass(index) {
//命名一下当前active的标签indexlet chooseindex = this.screen.currentIndex
//获取一下当前active的标签let choose = this.screen.list[chooseindex]
//判定点击的标签是不是当前active的标签if (index === this.screen.currentIndex) {
//是的话修改标签的status属性choose.status = choose.status === 1 ? 2 : 1} else {
//如果点击标签不是当前active标签
//初始化标签的status属性choose.status = 0
//让点击标签成为当前active标签this.screen.currentIndex = index
//修改active标签的status属性this.screen.list[index].status = 1}}完成，现在点击就会有上下箭头的切换效果了
这篇关于uniapp升降排序点击的dom变换设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
