类似tab选项卡的过滤筛选效果
如:有三个tab,每一个tab中的内容块,但是它们的内容块样式都是相同的,我需要点击每个tab的时候,把它们对应的内容展示出来。
怎么做呢?
做一个选项卡的效果,再筛选遍历
<view class="tablist" @click="chageTab(1)" :class='{active:thisActive==1}'>我的待办({{num}})</view>
<view class="tablist" @click="chageTab(2)" :class='{active:thisActive==2}'>我的已办</view>
<view class="tablist" @click="chageTab(3)" :class='{active:thisActive==3}'>我发起的</view>
<view class="tabview">
<view class="syjb-list" v-for="(item,index) in result" :key="index">
<view class="syjb-list-title">
<text>{{item.tabOrderno}}</text>
</view>
<view class="syjb-list-total">
<text>数字:</text>
<text>{{iem.num}}</text>
</view>
</view>
</view>
<script>
export default {
name: "index",
data(){
return{
thisActive:1,
tabData:[
{tabGroup: 2,tabOrderno: 2,num:49299,tabOrderno:'甜甜的耶啵'},
{tabGroup: 2,tabOrderno: 1,num:12139,tabOrderno:'酷盖呀'},
{tabGroup: 2,tabOrderno: 3,num:78955,tabOrderno:'不愧是我'},
{tabGroup: 3,tabOrderno: 1,num:44815,tabOrderno:'你不懂'},
{tabGroup: 3,tabOrderno: 3,num:37755,tabOrderno:'摸头杀'},
{tabGroup: 3,tabOrderno: 2,num:49298,tabOrderno:'摩头车'},
{tabGroup: 1,tabOrderno: 2,num:38532,tabOrderno:'继续爱你'},
{tabGroup: 1,tabOrderno: 1,num:37545,tabOrderno:'陪你到世界之巅'},
{tabGroup: 1,tabOrderno: 3,num:76675,tabOrderno:'百香果真好喝'},
],
result:[],
val:''
}
},
methods:{
chageTab(val){
this.thisActive=val;
//filter这是过滤tabGroup(是哪个tab的),jsonSort是进行排序(tabOrderno)
this.result = this.jsonSort(this.tabData.filter(item => item.tabGroup == val));
},
// 排序方法
jsonSort(array, field, reverse) {
if (array.length < 2 || !field || typeof array[0] !== 'object') return array
if (typeof array[0][field] === 'number') {
array.sort(function(x, y) {
return x[field] - y[field]
})
}
if (typeof array[0][field] === 'string') {
array.sort(function(x, y) {
return x[field].localeCompare(y[field])
})
}
if (reverse) {
array.reverse()
}
return array
},
}
</script>
//这里的数据是我模拟的,到时候可以根据接口传过来的数据来查找具体的需要数据
这个就是主要的代码块了,哈哈,样式就根据自己的需要来写吧,这里就不写了。