【愚公系列】2022年08月 微信小程序-纵向选项卡功能实现
【摘要】 前言纵向选项卡(vtabs)用于让用户在不同的视图中进行切换。以下讲解的是weui版,相关的还有antd-mini版本:https://help.aliyun.com/document_detail/438087.html 一、纵向选项卡(weui版)vtabs属性名类型默认值必选描述vtabsArray[]yes数据项格式为{title}active-tabNumber0no激活选项卡索...
前言
纵向选项卡(vtabs)用于让用户在不同的视图中进行切换。
以下讲解的是weui版,相关的还有antd-mini版本:https://help.aliyun.com/document_detail/438087.html
一、纵向选项卡(weui版)
vtabs
属性名 | 类型 | 默认值 | 必选 | 描述 |
---|---|---|---|---|
vtabs | Array | [] | yes | 数据项格式为{title} |
active-tab | Number | 0 | no | 激活选项卡索引 |
tab-bar-class | String | no | 选项卡样式 | |
active-class | String | no | 行为样式 | |
tab-bar-line-color | String | #ff0000 | no | 选定项目带下划线的一面的颜色 |
tab-inactive-text-color | String | #000000 | no | 未选中的字体颜色 |
tab-bar-active-text-color | String | #ff0000 | no | 检查字体颜色 |
tab-inactive-bg-color | String | #eeeeee | no | 未选中的背景色 |
tab-active-bg-color | String | #ffffff | no | 检查背景颜色 |
animation | Boolean | true | no | 打开动画 |
Bindtablick | eventhandle | no | 触发时点击选项卡,e.detail={index} | |
bindchange | eventhandle | no | 内容区域滚动原因选项卡更改时触发,以及.detail={index} |
vtab-content
属性名 | 类型 | 默认值 | 必选 | 描述 |
---|---|---|---|---|
tab-index | Number | 0 | yes | vtabs 数据索引(基于 0) |
1.安装包
npm i @miniprogram-component-plus/vtabs
npm i @miniprogram-component-plus/vtabs-content
2.使用
引用组件
"usingComponents": {
"mp-vtabs": "@miniprogram-component-plus/vtabs/index",
"mp-vtabs-content": "@miniprogram-component-plus/vtabs-content/index"
}
Page({
data: {
vtabs: [],
activeTab: 0,
},
onLoad() {
const titles = ['热搜推荐', '手机数码', '家用电器',
'生鲜果蔬', '酒水饮料', '生活美食',
'美妆护肤', '个护清洁', '女装内衣',
'男装内衣', '鞋靴箱包', '运动户外',
'生活充值', '母婴童装', '玩具乐器',
'家居建材', '计生情趣', '医药保健',
'时尚钟表', '珠宝饰品', '礼品鲜花',
'图书音像', '房产', '电脑办公']
const vtabs = titles.map(item => ({title: item}))
this.setData({vtabs})
},
onTabCLick(e) {
const index = e.detail.index
console.log('tabClick', index)
},
onChange(e) {
const index = e.detail.index
console.log('change', index)
}
})
<mp-vtabs
vtabs="{{vtabs}}"
activeTab="{{activeTab}}"
bindtabclick="onTabCLick"
bindchange="onChange"
class="test"
>
<block wx:for="{{vtabs}}" wx:key="title" >
<mp-vtabs-content tabIndex="{{index}}">
<view class="vtabs-content-item">我是第{{index + 1}}项: {{item.title}}</view>
</mp-vtabs-content>
</block>
</mp-vtabs>
.vtabs-content-item {
width: 100%;
height: 300px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)