【愚公系列】2022年08月 微信小程序-纵向选项卡功能实现

举报
愚公搬代码 发表于 2022/08/31 21:59:11 2022/08/31
【摘要】 前言纵向选项卡(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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。