微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例


Posted in Javascript onMay 14, 2019

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能。分享给大家供大家参考,具体如下:

微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

顶部滚动选项卡

话不多说,直接上代码

pages/home/home.wxml

<scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>
<!-- tab -->
<view class="tab">
<view class="tab-nav" style='font-size:12px'>
<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}">{{item.text}}</view>
<view>
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:150rpx" bindchange="bindChange">
<swiper-item>
<view>分类1</view>
</swiper-item>
<swiper-item>
<view>分类2</view>
</swiper-item>
<swiper-item>
<view>分类3</view>
</swiper-item>
<swiper-item>
<view>分类4</view>
</swiper-item>
<swiper-item>
<view>分类5</view>
</swiper-item>
<swiper-item>
<view>分类6</view>
</swiper-item>
</swiper>

pages/home/home.wxss

.tab {
display: flex;
flex-direction: column;
}
.tab-nav {
border-bottom: 1rpx solid #ddd;
width: 100%;
height: 80rpx;
display: flex;
line-height: 79rpx;
position: relative;
}
.tab-line {
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #f7982a;
transition: all 0.3s;
}
.tab-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/*选项卡页面联动切换*/
.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #777;
}
.on {
color: #da7c0c;
border-bottom: 1rpx solid #da7c0c;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}

pages/home/home.js

Page({
data: {
showtab: 0, //顶部选项卡索引
tabnav: {
tabnum: 5,
tabitem: [
{
"id": 0,
"text": "分类1"
},
{
"id": 1,
"text": "分类2"
},
{
"id": 2,
"text": "分类3"
},
{
"id": 3,
"text": "分类4"
},
{
"id": 4,
"text": "分类5"
},
{
"id": 5,
"text": "分类6"
}
]
},
productList: [],
// tab切换
currentTab: 0,
},
onLoad: function () {
},
setTab: function (e) {
var that = this
that.setData({
showtab: e.currentTarget.dataset.tabindex
})
if (this.data.currentTab === e.currentTarget.dataset.tabindex) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.tabindex
})
}
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current,
showtab: e.detail.current});
}
})

该代码实现基于两个大神的代码,(链接: https://3water.com/article/161227.htm 和https://3water.com/article/155522.htm),在两位大神的基础上衍生出的可滚动的顶部选项卡,在此致谢。代码缺陷:当向右滑动到第6个页面的时候选项卡没有自动滑动。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
js替代copy(示例代码)
Nov 27 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
详解jenkins自动化部署vue
May 14 #Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 #Javascript
JavaScript如何实现元素全排列实例代码
May 14 #Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 #Javascript
js中arguments对象的深入理解
May 14 #Javascript
ios中视频的最后一桢问题解决
May 14 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Express + Session 实现登录验证功能
2017/09/08 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python实现字符串和数字拼接
2020/03/02 Python
Python如何实现的二分查找算法
2020/05/27 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
大学新生欢迎词
2014/01/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
优秀班组事迹材料
2014/12/24 职场文书
廉政承诺书范文
2015/04/28 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
详细介绍python类及类的用法
2021/05/31 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers