小程序模板网

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

2018-04-17 多田翁

 

分享者:心存善念,来自原文地址 
选项卡是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. })

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

 

二:swiper实现块滑动

分享者:NeverMore_Jugg,来自原文地址

 

				
  1. <view class="container" style="height: {{ windowHeight }}px;">
  2. <view class="find-car-header">
  3. <view class="tab">
  4. <view bindtap="tabItemClick" id="tabItem_0" class="tab-item {{tabIndex == 0 ? 'active' : ''}}">页签1</view>
  5. <view bindtap="tabItemClick" id="tabItem_1" class="tab-item {{tabIndex == 1 ? 'active' : ''}}">页签2</view>
  6. </view>
  7. </view>
  8. <swiper bindchange="swiperChange" current="{{tabIndex}}" duration="600" class="content">
  9. <swiper-item class="swiper-item">
  10. <view class="letter-brand-list">
  11. <view class="letter-brand-item">
  12. <text>Artega</text>
  13. </view>
  14. <view class="letter-brand-item">
  15. <text>阿斯顿·马丁</text>
  16. </view>
  17. <view class="letter-brand-item">
  18. <text>奥迪</text>
  19. </view>
  20. <view class="letter-brand-item">
  21. <text>阿尔法·罗密欧</text>
  22. </view>
  23. </view>
  24. </swiper-item>
  25. <swiper-item class="swiper-item">
  26. <view class="letter-brand-list">
  27. <view class="letter-brand-item">
  28. <text>Artega</text>
  29. </view>
  30. <view class="letter-brand-item">
  31. <text>阿斯顿·马丁</text>
  32. </view>
  33. <view class="letter-brand-item">
  34. <text>奥迪


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23575.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询