微信小程序自定义可滑动顶部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源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
微信小程序 标签传入数据
May 08 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
Laravel学习教程之本地化模块
2017/08/18 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue实现信息管理系统
2020/05/30 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
物流专员岗位职责
2014/02/17 职场文书
通用自荐信范文
2014/03/14 职场文书
项目经理任命书内容
2014/06/06 职场文书
分居协议书范本
2014/11/03 职场文书
大学生创业事迹材料
2014/12/30 职场文书
孝女彩金观后感
2015/06/10 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python