【愚公系列】2022年08月 微信小程序-纵向和横向选项卡功能实现
文章目录
- 前言
- 一、纵向选项卡(weui版)
- 1.安装包
- 2.使用
- 二、横向选项卡(weui版)
- 1.安装包
- 2.使用
前言
纵向选项卡(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.indexconsole.log('tabClick', index)},onChange(e) {const index = e.detail.indexconsole.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.indexconsole.log('----------'+index);this.setData({ activeTab: index })},onChange(e) {const index = e.detail.indexconsole.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;
}
【愚公系列】2022年08月 微信小程序-纵向和横向选项卡功能实现相关推荐
- 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...
- 【愚公系列】2022年08月 微信小程序-view生成分享图片
文章目录 前言 一.view生成分享图片 1.组件的封装 2.组件的使用 3.效果 4.第三方工具的使用 前言 微信小程序并不支持view直接转绘到画布上,想要实现海报功能必须通过以下4个步骤: 通过 ...
- 【愚公系列】2022年08月 微信小程序项目篇-抽奖轮盘
文章目录 前言 一.抽奖轮盘 1.标题布局 1.1 CSS 1.2 HTML 1.4 效果 2.轮盘布局 2.1 CSS 2.2 HTML 2.3 效果 3.轮盘分割 3.1 CSS 3.2 HTML ...
- 【愚公系列】2022年08月 微信小程序-icon图标详解
文章目录 前言 一.自带图标 二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式 前言 在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...
- 【愚公系列】2022年08月 微信小程序-左划删除效果实现
文章目录 前言 一.左划删除效果实现 1.自定义实现 2.第三方组件实现 2.1 第三方包安装 2.2 使用 3.1 weui方式使用 3.1 weui安装 3.2 使用 前言 左划删除效果实现主要用 ...
- 【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
文章目录 前言 一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果 二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果 前言 大 ...
- 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能
文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现(node版)
文章目录 前言 一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置 前言 微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
- 【愚公系列】2022年02月 微信小程序-数据绑定
文章目录 前言 1.小程序页面结构 2.数据绑定的定义 一.数据绑定 1.简单绑定 总结 前言 1.小程序页面结构 微信小程序的页面结构主要是分别由四个文件组成: js(逻辑处理文件):负责页面逻辑内 ...
最新文章
- 目标检测 dcn v2_使用Detectron2分6步进行目标检测
- c++ 智能指针用法详解
- VB 获取路径名各部分 (获取文件路径,获取文件名,获取文件扩展名)自编
- AppCan VS PhoneGap - 对比两大移动开发平台
- ob_start()函数
- linux系统网桥管理工具brctl 安装及使用
- C# 判断文件是否在使用的状态FSDF
- 【已解决】Python安装TensorFlow报错“Consider adding this directory to PATH or, if you prefer to suppress this
- db4小波的一次分解与重构
- python找出某个文件夹下某个后缀的文件
- C++在屏幕中输出数字d0...while
- lstrcpyn和strncpy
- 【Java】浅谈Swing概况及简单窗口的构建
- 一年赚上亿的生意_甩过梅艳芳,做生意一年赚几亿,他竟然火了快四十年
- 华为超融合一体机助力深圳海关业务性能大幅提升
- 用arduino对stm32编程(一)
- android 语音播放
- 逆向与反汇编实战(一)--PEiD分析复现
- 常州一院有全消化道的机器人的_快讯!常州市首例第四代“达芬奇机器人”手术在常州一院成功实施!...
- 国内DCS系统发展现状