tab选项卡的过滤筛选效果

标签: javascript

类似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>

这个就是主要的代码块了,哈哈,样式就根据自己的需要来写吧,这里就不写了。

版权声明:本文为dqfkkll原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dqfkkll/article/details/108630914