微信小程序自定义可滑动顶部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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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数据流应用的简单例子
2012/06/01 PHP
PHP抽象类 介绍
2012/06/13 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
js实现图片360度旋转
2017/01/22 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python实现剪切功能
2019/01/23 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
2014教师党员自我评议总结
2014/09/19 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
文明礼仪主题班会
2015/08/13 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技