本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能。分享给大家供大家参考,具体如下:
微信小程序开发中选项卡。在android中选项卡一般用片段,到了小程序这里瞬间懵逼了。
总算做出来了。分享出来看看。
<强>先看效果:
<强>再上代码:
1. index.wxml
& lt; !——index.wxml祝辞
& lt;视图类=皊wiper-tab”比;
& lt;视图类=" swiper-tab-list {{currentTab==0 & # 63;“在”:“}}”数据流=" 0 " bindtap=皊wichNav”在哈哈& lt;/view>
& lt;视图类=" swiper-tab-list {{currentTab==1 & # 63;“在”:“}}”数据流=?”bindtap=皊wichNav”祝辞呵呵& lt;/view>
& lt;视图类=" swiper-tab-list {{currentTab==2 & # 63;“在”:“}}”数据流=?”bindtap=皊wichNav”祝辞嘿嘿& lt;/view>
& lt;/view>
& lt;偷窃者电流=" {{currentTab}}”类=皊wiper-box”持续时间=" 300 " bindchange=癰indchange”比;
& lt; !——我是哈哈——比;
& lt; swiper-item>
& lt; view>我是哈哈& lt;/view>
& lt;/swiper-item>
& lt; !——我是呵呵——比;
& lt; swiper-item>
& lt; view>我是呵呵& lt;/view>
& lt;/swiper-item>
& lt; !——我是嘿嘿——比;
& lt; swiper-item>
& lt; view>我是嘿嘿& lt;/view>
& lt;/swiper-item>
& lt;/swiper>
之前
2. index.wxss
/* * index.wxss * */.swiper-tab {
宽度:100%;
边界底部:2 rpx固体# 777777;
text-align:中心;
行高:80 rpx;}
.swiper-tab-list{字体大小:30 rpx;
显示:inline-block;
宽度:33.33%;
颜色:# 777777;
}
碧绿{颜色:# da7c0c;
边界底部:5 rpx固体# da7c0c;}
.swiper-box{显示:块;高度:100%;宽度:100%;溢出:隐藏;}
{.swiper-box视图
text-align:中心;
}
之前
3. index.js
//index.js//获取应用实例
应用var=getApp ()
页面({
数据:{/* *
*页面配置
*/winWidth: 0,
winHeight: 0,//选项卡切换
currentTab: 0,
}，
alt="微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解">
这样一个类似:viewpage的顶部选项卡就出来了。
<强>微信小程序开发中窗口底部标签栏切换页面很简单很方便。
<强>代码:
1. app.json
//app.json
{
“页面”:(
“页/索引/索引”,
“页面/日志/日志”
),
"窗口":{
“backgroundTextStyle”:“光”,
“navigationBarBackgroundColor”:“# 999999”,
“navigationBarTitleText”:“选项卡”,
“navigationBarTextStyle”:“白色”
}，
" tabBar ": {
“颜色”:“# ccc”,
“selectedColor”:“# 35495 e”,
“边框类型”:“白”,
“写成backgroundColor”:“# f9f9f9”,
“列表”:(
{
“文本”:“首页”,
:“pagePath页面/指数指数”,
“iconPath”:“图像/home.png”,
“selectedIconPath”:“图像/home-actived.png”
}，
{
“文本”:“目录”,
:“pagePath页/目录/目录”,
“iconPath”:“图像/note.png”,
“selectedIconPath”:“图像/note-actived.png”
}，
{
“文本”:“我的”,
:“pagePath页/我/我的”,
“iconPath”:“图像/profile.png”,
“selectedIconPath”:“图像/profile-actived.png”
}
］
}
}
之前
pagePath是页面路径。iconPath是图片路径、图标大小限制为40 kb。
selectedIconPath:选中时的图片路径,图标大小限制为40 kb
标签栏的最多5个,最少2个。
在页目录下写好页面即可切换。
希望本文所述对大家微信小程序开发有所帮助。
