本文介绍如何在 uni-app 中利用单数组实现动态分段切换的滑动选项卡，提高页面效率并减少数据承载。通过设置 `data` 属性为包含标题和 ID 的数组，并监听 `clickKeyword` 事件来处理点击事件，更新显示内容。示例中展示了创建选项卡及点击事件处理的方法，动态更新列表以展示所选内容。
基于uni-app 单数组 可滑动选项卡
使用方式：
在 script 中引用组件
import glance from '@/components/jm-glance.vue';
export default {
components: {glance}
}
基础使用方式
v-on:clickKeyword='clickKeyword'
:data='keyList'
>
属性说明：
属性名:data 类型:Array 默认值:[] 格式：[{title:'美妆',id:'1'}]
事件说明： 按钮点击事件，接受2个参数
clickKeyword(点击的id,点击的名称) {
}
示例demo
{{item}}
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;
}
}
}
.demoList {
text-align: center;
line-height: 100upx;
}
扫一扫
1281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
