微信小程序自定义可滑动顶部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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
微信小程序开发实现的选项卡(窗口顶部/底部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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php use和include区别总结
2019/10/13 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Python读取网页内容的方法
2015/07/30 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
对python Tkinter Text的用法详解
2018/10/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
2014年党员承诺书范文
2014/05/20 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
单位接收函范文
2015/01/30 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
贷款工资证明范本
2015/06/12 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
2019银行竞聘书
2019/06/21 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS