微信小程序 选项卡的简单实例

网友投稿 408 2023-11-10

微信小程序 选项卡的简单实例

微信小程序 选项卡的简单实例

看下效果

代码：

home.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--pages/home/home.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0 ? on : }}" data-current="0" bindtap="swichNav">热门</view>
<view class="swiper-tab-item {{currentTab==1 ? on : }}" data-current="1" bindtap="swichNav">关注</view>
<view class="swiper-tab-item {{currentTab==2 ? on : }}" data-current="2" bindtap="swichNav">好友</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px" bindchange="bindChange">
<swiper-item>
<view>热门</view>
</swiper-item>
<swiper-item>
<view>关注</view>
</swiper-item>
<swiper-item>
<view>好友</view>
</swiper-item>
</swiper>

home.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* pages/home/home.wxss */
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #eeeeee;
text-align: center;
line-height: 80rpx;}
.swiper-tab-item{ font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #666666;
}
.on{ color: #f10b2e;
border-bottom: 5rpx solid #f10b2e;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
text-align: center;
}

home.js

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持!

您可能感兴趣的文章:微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换微信小程序实现选项卡功能微信小程序的tab选项卡的实现效果微信小程序开发之选项卡(窗口底部TabBar)页面切换微信小程序 tabs选项卡效果的实现微信小程序实战之顶部导航栏(选项卡)(1)微信小程序实现顶部选项卡(swiper)微信小程序自定义组件实现tabs选项卡功能微信小程序实现选项卡的简单实例微信小程序实现选项卡的方法

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

标签：程序 微信小程序 实例 小程序 js
上一篇:微信小程序使用navigator实现页面跳转功能
下一篇:小程序实现登录功能
相关文章

 发表评论

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