微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

网友投稿 603 2023-11-13

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

总算做出来了.分享出来看看.

先看效果:

再上代码:

1.index.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--index.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? on : }}" data-current="0" bindtap="swichNav">哈哈</view>
<view class="swiper-tab-list {{currentTab==1 ? on : }}" data-current="1" bindtap="swichNav">呵呵</view>
<view class="swiper-tab-list {{currentTab==2 ? on : }}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- 我是哈哈 -->
<swiper-item>
<view>我是哈哈</view>
</swiper-item>
<!-- 我是呵呵 -->
<swiper-item>
<view>我是呵呵</view>
</swiper-item>
<!-- 我是嘿嘿 -->
<swiper-item>
<view>我是嘿嘿</view>
</swiper-item>
</swiper>

2.indexwxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**indexwxss**/
swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;}
swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 33%;
color: #777777;
}
on{ color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;}
swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
swiper-box view{
text-align: center;
}

3.index.js

这样一个类似viewpage的顶部选项卡就出来了.

您可能感兴趣的文章:微信小程序实现tab左右切换效果微信小程序 Tab页切换更新数据微信小程序 swiper制作tab切换实现附源码微信小程序开发之选项卡(窗口底部TabBar)页面切换微信小程序实现tab切换效果微信小程序滚动Tab实现左右可滑动切换微信小程序实现tab和swiper切换结合效果微信小程序实现tab页面切换功能微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解微信小程序实现tab页面切换效果

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:疫情过后,旅游酒店APP开发如何抓住新商机
下一篇:知识付费时代,付费阅读APP大有可为
相关文章

 发表评论

暂时没有评论,来抢沙发吧~