微信小程序开发之选项卡，swiper实现块滑动

分享者：心存善念，来自原文地址 
选项卡是web开发中经常使用到的一个模块，在小程序中竟然没有，这里参考别人的文章自己做了一个双选项卡

实现思路：

通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示)，达到切换展示电影和游戏的目的

代码：

1.index.wxml

1. <!--index.wxml-->
2. <view class="swiper-tab">
3. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">电影</view>
4. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戏</view>
5. </view>
6.  
7. <view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>
8. <view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>

2.index.wxss

1. .swiper-tab {
2. width: 100%;
3. text-align: center;
4. line-height: 80rpx;
5. background-color:white;
6. }
7.  
8. .swiper-tab-list {
9. font-size: 30rpx;
10. display: inline-block;
11. width: 50%;
12. color: #777;
13. border-bottom: 0rpx;
14. }
15.  
16. .on {
17. color: #da7c0c;
18. border-bottom: 2rpx solid #da7c0c;
19. }
20.  
21. .swiper-box {
22. display: block;
23. height: 100%;
24. width: 100%;
25. overflow: hidden;
26. }
27.  
28. .swiper-box view {
29. text-align: center;
30. }

3.index.js

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page( {
5. data: {
6. isShow: true,
7. currentTab: 0,
8. },
9.  
10. swichNav: function (e) {
11. if (this.data.currentTab === e.target.dataset.current) {
12. return false;
13. } else {
14. var showMode = e.target.dataset.current == 0;
15. this.setData({
16. currentTab: e.target.dataset.current,
17. isShow: showMode
18. })
19. }
20. },
21. })

参考文章：https://blog.csdn.net/qq_31383345/article/details/52900835

二：swiper实现块滑动

分享者：NeverMore_Jugg，来自原文地址