微信小程序实现页面tab切换

问题背景

客户端开发过程中，实现页面切换是一个很常见的场景，本文将介绍一下微信小程序是如何实现页面tab切换的。

问题分析

小程序一个页面相关的文件结构如下： image.png

问题解决

话不多说直接上代码。 (1)index.js，代码如下：

  1. const app = getApp()
  2. Page({
  3.   data: {
  4.     currentIndex: 0, //默认是活动项
  5.   },
  6.   data: {
  7.     currentData:0,
  8. },
  9. //获取当前滑块的index
  10. bindchange(e){
  11.     const that  = this;
  12.     that.setData({
  13.         currentData: e.detail.current
  14.     })
  15. },
  16. //点击切换，滑块index赋值
  17. checkCurrent(e){
  18.     const that = this;
  19.  
  20.     if (that.data.currentData === e.target.dataset.current){
  21.         return false;
  22.     }else{
  23.         that.setData({
  24.             currentData: e.target.dataset.current
  25.         })
  26.     }
  27. },
  28. //上一题
  29. prevClick(){
  30.     var currentData = this.data.currentData - 1
  31.     if(currentData + 1 == 0){
  32.         wx.showToast({
  33.           title: '这是第1题了',
  34.         })
  35.     }else{
  36.         this.setData({
  37.             currentData:currentData
  38.         })
  39.     }
  40. },
  41. //下一题
  42. nextClick(){
  43.   var currentData = this.data.currentData + 1
  44.   if(currentData + 1 == 7){
  45.       wx.showToast({
  46.         title: '这是第6题了',
  47.       })
  48.   }else{
  49.       this.setData({
  50.           currentData:currentData
  51.       })
  52.   }
  53. },
  54. })

(2)index.wxml，代码如下：

  1. <view class="bgwhite">
  2.     <scroll-view scroll-x="true">
  3.         <view class="content">
  4.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 0 ? 'topic' : ''}}" data-current="0" bindtap='checkCurrent'>第1题</view>
  5.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 1 ? 'topic' : ''}}" data-current="1" bindtap='checkCurrent'>第2题</view>
  6.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 2 ? 'topic' : ''}}" data-current="2" bindtap='checkCurrent'>第3题</view>
  7.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 3 ? 'topic' : ''}}" data-current="3" bindtap='checkCurrent'>第4题</view>
  8.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 4 ? 'topic' : ''}}" data-current="4" bindtap='checkCurrent'>第5题</view>
  9.             <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 5 ? 'topic' : ''}}" data-current="5" bindtap='checkCurrent'>第6题</view>
  10.         </view>
  11.     </scroll-view>
  12. </view>
  13. <swiper current="{{currentData}}" class='width100' style="height:600px;" duration="300" bindchange="bindchange">
  14.     <swiper-item>
  15.         <view class="m-lr-20">
  16.             <view class="row p-t-30 p-b-10">
  17.                 <view class="radio_singel f22 p-lr-10">单选</view>
  18.                 <view class="m-l-20 weight500 f28">题目1</view>
  19.             </view>
  20.             <radio-group bindchange="radioChange">
  21.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  22.                 <view class="weui-cell__hd">
  23.                     <radio checked="true" color="#1989f9"/>
  24.                 </view>
  25.                 <view class="f30 weight500 m-l-10">A、1111</view>
  26.                 </label>
  27.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  28.                 <view class="weui-cell__hd">
  29.                     <radio color="#1989f9"/>
  30.                 </view>
  31.                 <view class="f30 weight500 m-l-10">B、2222</view>
  32.                 </label>
  33.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  34.                 <view class="weui-cell__hd">
  35.                     <radio color="#1989f9"/>
  36.                 </view>
  37.                 <view class="f30 weight500 m-l-10">C、3333</view>
  38.                 </label>
  39.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  40.                 <view class="weui-cell__hd">
  41.                     <radio color="#1989f9"/>
  42.                 </view>
  43.                 <view class="f30 weight500 m-l-10">D、4444</view>
  44.                 </label>
  45.             </radio-group>
  46.         </view>
  47.     </swiper-item>
  48.     <swiper-item>
  49.         <view class="m-lr-20">
  50.             <view class="row p-t-30 p-b-10">
  51.                 <view class="radio_singel f22 p-lr-10">单选</view>
  52.                 <view class="m-l-20 weight500 f28">题目2</view>
  53.             </view>
  54.             <video src="" style="width:100%;"></video>
  55.             <radio-group bindchange="radioChange">
  56.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  57.                 <view class="weui-cell__hd">
  58.                     <radio checked="true" color="#1989f9"/>
  59.                 </view>
  60.                 <view class="f30 weight500 m-l-10">A、1111</view>
  61.                 </label>
  62.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  63.                 <view class="weui-cell__hd">
  64.                     <radio color="#1989f9"/>
  65.                 </view>
  66.                 <view class="f30 weight500 m-l-10">B、2222</view>
  67.                 </label>
  68.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  69.                 <view class="weui-cell__hd">
  70.                     <radio color="#1989f9"/>
  71.                 </view>
  72.                 <view class="f30 weight500 m-l-10">C、3333</view>
  73.                 </label>
  74.                 <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
  75.                 <view class="weui-cell__hd">
  76.                     <radio color="#1989f9"/>
  77.                 </view>
  78.                 <view class="f30 weight500 m-l-10">D、4444</view>
  79.                 </label>
  80.             </radio-group>
  81.         </view>
  82.     </swiper-item>
  83.     <swiper-item>
  84.     </swiper-item>
  85.     <swiper-item>
  86.     </swiper-item>
  87.     <swiper-item>
  88.     </swiper-item>
  89.     <swiper-item>
  90.     </swiper-item>
  91. </swiper>
  92.  
  93. <view class="footer p-tb-25">
  94.     <view class="m-lr-30 row just-btw">
  95.         <view class="row alignitems" bindtap="prevClick">
  96.             <view class="f36 weight500 m-l-10">上一题</view>
  97.         </view>
  98.         <view class="jiaojuanbtn f30 white p-tb-20">交卷</view>
  99.         <view class="row alignitems" bindtap="nextClick">
  100.             <view class="f36 weight500 m-r-10">下一题</view>
  101.         </view>
  102.     </view>
  103. </view>

(3)index.wxss，代码如下：

  1. .topic{
  2.   position: relative;
  3.   color:#000;
  4. }
  5.  
  6. .content{
  7.   display: flex;
  8.   justify-content: space-around;
  9.   flex-direction: row;
  10. }
  11.  
  12. .topic::before{
  13.   position: absolute;
  14.   content:"";
  15.   width:80rpx;
  16.   height:6rpx;
  17.   background: #1989f9;
  18.   border-radius: 20rpx;
  19.   bottom: 0;
  20.   left:50%;
  21.   transform: translateX(-50%);
  22. }
  23. .radio_singel{
  24.   background: #e6f7ff;
  25.   border:1px solid #91d4fe;
  26.   color:#1890ff;
  27. }
  28. .footer{
  29.   position: fixed;
  30.   bottom: 0;
  31.   background-color: #fff;
  32.   left:0;
  33.   right:0;
  34. }

运行结果如下： 1681374097809.gif

问题总结

本文主要介绍了微信小程序是实现页面tab切换的一种方案，有兴趣的同学可以进一步深入研究。