提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

微信程序 实现 功能 2022 系列 愚公 08
2023-06-13 09:11:13 时间

文章目录

前言

纵向选项卡（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;
}

二、横向选项卡（weui版）

属性名

类型

默认值

必选

描述

tabs

Array

[]

yes

数据项格式为{title}

tab-class

String

no

选项卡样式

swiper-class

String

no

内容区域刷卡器样式

active-class

String

no

行为样式

tab-underline-color

String

#07c160

no

所选项目的下划线颜色

tab-active-text-color

String

#000000

no

检查字体颜色

tab-inactive-text-color

String

#000000

no

未选中的字体颜色

tab-background-color

String

#ffffff

no

选项卡背景色

active-tab

Number

0

no

激活选项卡索引

duration

Number

500

no

内容区交接持续时间

Bindtablick

eventhandle

no

触发时点击选项卡，e.detail={index}

bindchange

eventhandle

no

内容区域滚动原因选项卡更改时触发，以及.detail={index}

1.安装包

npm install @ miniprogram-component-plus/tabs

2.使用

引用组件

"usingComponents": {
  "mp-tabs": "@miniprogram-component-plus/tabs/index"
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 1,
    arr:['1','2','3','4'],
    tabs: [],
    arr2: [],
    activeTab: 0,
  },
  onLoad() {
    const titles = ['首页', '外卖', '商超生鲜', '购物', '美食饮品', '生活服务', '休闲娱乐', '出行']
    const tabs = titles.map(item => ({ title: item }))
    this.setData({ tabs })
    this.setData({ arr2: ['11', '22', '33', '44'] })
  },

  onTabCLick(e) {
    const index = e.detail.index
    console.log('----------'+index);
    this.setData({ activeTab: index })
  },

  onChange(e) {
    const index = e.detail.index
    console.log('----------'+index);
    this.setData({ activeTab: index })
  }
})
 <mp-tabs 
  tabs="{{tabs}}" 
  activeTab="{{activeTab}}" 
  swiperClass="weui-tabs-swiper"
  bindtabclick="onTabCLick"
  bindchange="onChange"
  activeClass="tab-bar-title__selected"
>

  <block wx:for="{{tabs}}" wx:key="title">
    <view class="tab-content" slot="tab-content-{{index}}" > {{item.title}} </view>
  </block>

</mp-tabs>
.bgView {
  /* background-color: orange; */
  height: 500px;
  width: 100%;
}

.bg {
  /* background: red; */
  /* position: fixed;
  top: 0;
  height: 40px; */
}

page {
  height: 100%;
}

/* ------------ weui -------------- */
.weui-tabs-bar__wrp {
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  height: 30px; 
  z-index:9999;
}

.weui-tabs-swiper {
  margin-top: 30px;
  width: 100%;
  height: 500px;
}

.tab-content {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /* padding: 40rpx; */
}

.weui-tabs-bar__title {
  margin: 0px 10px;
}

.tab-bar-title__selected {
  font-size: 20px;
  font-weight: bold;
}

相关文章