基于uni-app 单数组 可滑动选项卡

使用方式:

在 script 中引用组件

import glance from '@/components/jm-glance.vue';
export default {
    components: {glance}
}

基础使用方式

<glance 
    v-on:clickKeyword='clickKeyword' 
    :data='keyList'
    >
</glance>

属性说明:

属性名:data 类型:Array 默认值:[] 格式:[{title:'美妆',id:'1'}]

事件说明: 按钮点击事件,接受2个参数

clickKeyword(点击的id,点击的名称) {

            }

示例demo

<template>
    <view>
        <glance v-on:clickKeyword='clickKeyword' :data='keyList'></glance>

        <view class="demoList" v-for="(item,index) in list" :key='index'>
            {{item}}
        </view>

    </view>
</template>


    import glance from '@/components/glance.vue';
    export default {
        data() {
            return {
                keyList: [{
                        title: '美妆',
                        id: '1'
                    },
                    {
                        title: '潮鞋',
                        id: '2'
                    },
                    {
                        title: '美衣',
                        id: '3'
                    },
                    {
                        title: '美食',
                        id: '4'
                    },
                    {
                        title: '数码',
                        id: '5'
                    }
                ],
                list: [

                ]
            }
        },
        components: {

            glanceSlideNavTabBar

        },
        onLoad() {
            this.list = ['美妆', '美妆', '美妆', '美妆', '美妆', '美妆', '美妆', '美妆', '美妆'];
        },
        methods: {
            clickKeyword(e) {
                uni.showToast({
                    title: '点击选项卡,id为:' + e.key + ',内容为:' + e.name,
                    icon: 'none',
                    duration: 2000
                });
                this.list = [];
                var arr = [e.name, e.name, e.name, e.name, e.name, e.name, e.name, e.name];
                this.list = arr;

            }

        }
    }


<style>
    .demoList {
        text-align: center;
        line-height: 100upx;
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问