uniapp开发app框架在提升开发效率中的独特优势与应用探索
394
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~