devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序开发-实现选项切换功能，通过实现微信小程序页面滑动功能，同一页面设置多个选项，可以切换显示不同选项，实现选项的显示和隐藏，新手级教程_微信小程序选项卡切换怎么实现

作者：IT小白 | 2024-07-09 13:51:10

赞

踩

微信小程序选项卡切换怎么实现

需求背景：通过实现微信小程序页面滑动功能，可以在同一个页面设置多个选项，并切换显示不同选项，实现选项的显示和隐藏。

使用的开发工具为：微信小程序开发工具

在微信小程序中的page目录下的新建class页面，并在app.json文件中的"pages"数组里面配置class路径，这样才会显示出这个页面

接着执行以下操作，读者可根据代码示例与代码说明、注释结合来看，并根据实际需求来做调整：

第一步：在class页面的js文件中，使用小程序框架提供的 Page() 函数来创建页面实例，并将需要绑定的数据和事件处理函数添加到实例中。在小程序运行时，这些数据和函数将被绑定到对应的页面元素上，以实现数据驱动和交互功能。

代码示例：

  1. // pages/class/class.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     // tab选项
  9.     tabList: [
  10.       {title: "免费课程",index: "0",},
  11.       {title: "付费课程",index: "1",}
  12.     ],
  13.     tabsId: 0, //默认选型为免费课程
  14.   },
  15.   // 滑动时触发的事件
  16.   slideOn(e) {
  17.     // 拿到当前索引并动态改变
  18.     this.setData({
  19.         tabsId: e.detail.current
  20.     })
  21. },
  22.  
  23. //点击tab时触发
  24. tabsOn(e) {
  25.     this.setData({
  26.         //拿到当前索引并动态改变
  27.         tabsId: e.currentTarget.dataset.idx
  28.     })
  29. },
  30.  
  31. })


代码说明：
    1. `data` 对象定义了页面的初始数据。其中包含了两个属性：
       - `tabList` 是一个数组，包含了两个对象，每个对象表示一个选项卡。每个选项卡对象有两个属性：`title` 表示选项卡标题，`index` 表示选项卡的索引。
       - `tabsId` 是一个数字，表示当前选中的选项卡的索引，默认为 0。

    2. `slideOn(e)` 函数是滑动时触发的事件处理函数。当滑动到不同的选项卡时，通过获取滑动事件 `e.detail.current` 的值来动态改变当前选中的选项卡索引，并更新到 `tabsId` 中。

    3. `tabsOn(e)` 函数是点击选项卡时触发的事件处理函数。通过获取点击事件 `e.currentTarget.dataset.idx` 的值来动态改变当前选中的选项卡索引，并更新到 `tabsId` 中。

第二步：在class页面的js文件中引用van图标组件
代码示例：

  1. // pages/class/class.json
  2. {
  3.   "usingComponents": {
  4.     "van-icon": "@vant/weapp/icon/index"// 引用van图标组件
  5.   }
  6. }


第三步：在class页面的wxml的文件中来做一个页面布局，通过循环渲染选项卡并监听滑动事件来实现在不同内容之间进行切换，并且根据当前选择的选项卡显示对应内容。

代码示例：

  1. <!--pages/class/class.wxml-->
  2. <view class="top-box">
  3.   <!-- Tab布局 -->
  4.   <view class="navBox">
  5.         <view class="titleBox" wx:for="{{tabList}}" wx:key="index" bindtap="tabsOn" data-idx="{{item.index}}">
  6.             <text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>  
  7.         </view>
  8.     </view>
  9.     <!-- 内容布局 -->
  10.     <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
  11.         <!-- circular 启用循环滑动 -->
  12.         <swiper-item>
  13.             <view class="buttum-free-box">
  14.               <view class="buttum-free-box1">
  15.                 <view class="buttum-free-img1">
  16.                   <image class="img1" src="https://ts1.cn.mm.bing.net/th/id/R-C.3de08811a0039edc107724a80006d99d?rik=ORTjMJ2MD0JMCQ&riu=http%3a%2f%2fpic.rmb.bdstatic.com%2f3de08811a0039edc107724a80006d99d.jpeg&ehk=8MwsIqU00BkjlfPY8jS47noobfo7y4Zvh9aKHoBPzRc%3d&risl=&pid=ImgRaw&r=0" mode="aspectFill"/>
  17.                 </view>
  18.                 <view class="buttum-free-txt">
  19.                   <text class="buttum-free-text1">夏天</text>
  20.                   <text class="buttum-free-text2">课时：48h</text>
  21.                   <text class="buttum-free-text3">简介：一场爱与和平之旅</text>
  22.                 </view>
  23.                 
  24.               </view>
  25.               <view class="buttum-free-box2">
  26.                 <view class="buttum-free-img2">
  27.                   <image class="img2" src="https://2f.zol-img.com.cn/product/144/343/ceyLgJjKf4U6.jpg" mode="aspectFill"/>
  28.                 </view>
  29.                 <view class="buttum-free-txt">
  30.                   <text class="buttum-free-text1">大个子熊与小个子猪</text>
  31.                   <text class="buttum-free-text2">课时：12h</text>
  32.                   <text class="buttum-free-text3">简介：一场爱与和平之旅</text>
  33.                 </view>
  34.   
  35.               </view>
  36.               
  37.             </view>
  38.         </swiper-item>
  39.         <swiper-item>
  40.           <!-- 第一行 -->
  41.           <view class="buttum-pay-line1">
  42.             <text class="buttum-pay-line1-text">一年级语文</text>
  43.             <view class="pay-icon1">
  44.               <image class="queen" src="/images/tabs/皇冠-黄色.png"></image>
  45.               <text class="pay-icon1-num">18/40</text>
  46.             </view>
  47.           </view>
  48.           <!-- 第二行 -->
  49.           <view class="buttum-pay-line2">
  50.                   <view class="buttum-pay-left-box">
  51.                     <view class="Unit">Unit 1</view>
  52.                     <view class="queenANDschedule">
  53.                         <image class="queen1" src="/images/tabs/皇冠-灰色.png" mode="aspectFill"></image>
  54.                         <image class="queen2" src="/images/tabs/皇冠-黄色.png" mode="aspectFill"></image>
  55.                       <view class="scheduleout">
  56.                         <view class="schedulein"></view>
  57.                       </view>
  58.                     </view>
  59.                   </view>
  60.                   <view class="buttum-pay-right-box">
  61.                     <image class="lock" src="/images/tabs/锁.png"></image>
  62.                   </view>
  63.                 </view>
  64.                   
  65.           <!-- 第三行 -->
  66.           <view class="buttum-pay-line1">
  67.             <text class="buttum-pay-line1-text">绘本</text>
  68.             <view class="pay-icon1">
  69.               <image class="queen" src="/images/tabs/皇冠-黄色.png"></image>
  70.               <text class="pay-icon1-num">18/40</text>
  71.             </view>
  72.           </view>
  73.           <!-- 第四行 -->
  74.           <view class="buttum-pay-line2">
  75.                   <view class="buttum-pay-left-box">
  76.                     <view class="Unit">Unit 1</view>
  77.                     <view class="queenANDschedule">
  78.                         <image class="queen1" src="/images/tabs/皇冠-灰色.png" mode="aspectFill"></image>
  79.                         <image class="queen2" src="/images/tabs/皇冠-黄色.png" mode="aspectFill"></image>
  80.                       <view class="scheduleout">
  81.                         <view class="schedulein"></view>
  82.                       </view>
  83.                     </view>
  84.                   </view>
  85.                   <view class="buttum-pay-right-box">
  86.                     <image class="lock" src="/images/tabs/锁.png"></image>
  87.                   </view>
  88.                 </view>
  89.         </swiper-item>
  90.     </swiper>
  91.   
  92. </view>

代码说明：

    1. `<view class="top-box">...</view>`：顶部容器，包含了选项卡和内容布局。

    2. `<view class="navBox">...</view>`：选项卡容器，用于展示选项卡列表。

    3. `<view class="titleBox" wx:for="{{tabList}}" wx:key="index" bindtap="tabsOn" data-idx="{{item.index}}">...</view>`：每个选项卡的容器。通过 `wx:for` 循环遍历 `tabList` 数组，并使用 `bindtap` 绑定点击事件处理函数 `tabsOn`。使用 `data-idx="{{item.index}}"` 将当前选项卡的索引传递给事件处理函数。

    4. `<text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>`：选项卡标题文本。根据当前选中的选项卡索引与循环遍历的索引进行比较，如果相等则添加 `fontColorBox` 样式类，用于标识当前选中的选项卡。

    5. `<swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>...</swiper>`：内容布局容器，使用滑动视图来实现切换不同内容区域。

    6. `<swiper-item>...</swiper-item>`：每个内容区域的容器。可以包含不同的子元素来展示不同内容。
    在这段代码中，有两个 swiper-item 子元素用于展示免费课程和付费课程的内容。每个 swiper-item 中包含了一些 view 元素和 image 元素来展示具体的课程信息、图片等。根据需要可以添加更多 swiper-item 来展示更多不同类型的内容。

第四步：在class页面的WXSS文件中设置页面的样式，包含了选项卡、免费课程和付费课程等元素的样式。
代码示例：

  1. /* pages/class/class.wxss */
  2. .top-box {
  3.   padding: 0 10px;
  4. }
  5.  
  6.  
  7. /* 选项事件盒子 */
  8. .navBox {
  9.   /* tab整体样式 */
  10.   height: 100rpx;
  11.   display: flex;
  12.   align-items: center;
  13.   position: relative;
  14.   bottom: -25px;
  15.   left: -10px;
  16. }
  17.  
  18. .fontColorBox {
  19.   /* 选中tab样式 */
  20.   color: white;
  21.   
  22.   font-weight: bold;
  23.   display: flex;
  24.   flex-direction: column;
  25.   align-items: center;
  26.   justify-content: center; 
  27.   background-color: #8ad1fa;
  28.   height: 40px;
  29.   width: 110px;
  30.   border-radius: 18px;
  31. }
  32.  
  33. .titleBox {
  34.   /* 未选中tab样式 */
  35.   color: #565656;
  36.   font-size: 20px;
  37.   font-weight: 700;
  38.   display: flex;
  39.   flex-direction: column;
  40.   align-items: center;
  41.   padding: 0 10px;
  42. }
  43.  
  44. .swiperTtemBox {
  45.   /* 内容样式 */
  46.   padding: 16rpx;
  47.   height: calc(100vh - 150rpx);
  48. }
  49. .buttum-free-box {
  50.   display: flex;
  51.   flex-direction: column;
  52.   justify-content: space-between;
  53.   padding: 100rpx 0;
  54.  
  55. }
  56. .buttum-free-box1 {
  57.   display: flex;
  58.   justify-content: space-between;
  59.   width: 330px;
  60. }
  61. .buttum-free-box2 {
  62.   display: flex;
  63.   justify-content: space-between;
  64.   width: 330px;
  65.   position: relative;
  66.   bottom: -30px;
  67. }
  68. .img1 {
  69.   height: 90px;
  70.   width: 125px;
  71.   border-radius: 18px;
  72. }
  73. .img2 {
  74.   height: 90px;
  75.   width: 125px;
  76.   border-radius: 18px;
  77.   position: relative;
  78.   bottom: -3px;
  79. }
  80. .buttum-free-txt {
  81.   display: flex;
  82.   flex-direction: column;
  83.   justify-content: center; 
  84.   position: relative;
  85.   left: -10px;
  86.   
  87. }
  88.  
  89.  
  90. .buttum-free-text1{
  91.   font-size: 18px;
  92.   font-weight: 700;
  93.   color: #565656;
  94.   padding: 5px 0;
  95.   
  96. }
  97. .buttum-free-text2{
  98.   font-size: 16px;
  99.   color: #565656;
  100.   padding: 5px 0;
  101. }
  102. .buttum-free-text3{
  103.   font-size: 16px;
  104.   color: #565656;
  105.   padding: 5px 0;
  106. }
  107.  
  108. /* 付费课程 */
  109.   /* 第一行 */
  110. .buttum-pay-line1 {
  111.   display: flex;
  112.   justify-content: space-between;
  113.   position: relative;
  114.   bottom: -20px;
  115.   padding: 10px 0;
  116.  
  117. }
  118. .buttum-pay-line1-text {
  119. display: flex;
  120. align-items: center;
  121. color: #000000;
  122. font-size: 18px;
  123. font-weight: 300;
  124. }
  125. .pay-icon1{
  126.   display: flex;
  127.   align-items: center;
  128. }
  129. .queen{
  130.   width: 80rpx;
  131.   height: 80rpx;
  132. }
  133. .pay-icon1-num{
  134.   font-size: 19px;
  135.   font-weight: 300;
  136.   color: #646464;
  137. }
  138. /* 第二行 */
  139. .buttum-pay-line2 {
  140.   display: flex;
  141.   justify-content: space-between;
  142.   position: relative;
  143.   bottom: -25px;
  144.  
  145. }
  146. .buttum-pay-left-box {
  147.   background-color: white;
  148.   display: flex; 
  149.   flex-direction: column; 
  150.   align-items: center;
  151.   justify-content: space-around;
  152.   width: 330rpx;
  153.   height: 260rpx;
  154.   border-radius: 18px;
  155. }
  156. .Unit{
  157.   padding: 10px 0;
  158.   font-size: 50rpx;
  159. }
  160. .queenANDschedule {
  161.   display: flex;
  162.   width: 340rpx;
  163.   height: 80rpx;
  164. }
  165. .queen1 {
  166.   width: 100rpx;
  167.   height: 100rpx;
  168.   position: relative;
  169.   left: 8px;
  170.   bottom: 8px;
  171. }
  172. .queen2 {
  173.   width: 89rpx;
  174.   height: 89rpx;
  175.   position: relative;
  176.   left: -24px;
  177.   bottom: 5px;
  178. }
  179. .scheduleout {
  180.   background-color: #b9babc;
  181.   width: 310rpx;
  182.   height: 30rpx;
  183.   border-top-right-radius: 18px;
  184.   border-bottom-right-radius: 18px;
  185.   position: relative;
  186.   bottom: -18px;
  187.   left: -15px;
  188. }
  189. .schedulein {
  190.   background-color: #f0c263;
  191.   width: 130rpx;
  192.   height: 30rpx;
  193.   border-top-right-radius: 18px;
  194.   border-bottom-right-radius: 18px;
  195.   position: relative;
  196.   left: -6px;
  197. }
  198. .buttum-pay-right-box {
  199.   background-color: white;
  200.   display: flex;
  201.   flex-direction: column;
  202.   justify-content: center;
  203.   align-items: center; 
  204.   width: 330rpx;
  205.   height: 260rpx;
  206.   border-radius: 18px;
  207. }
  208. .lock {
  209.   width: 150rpx;
  210.   height: 150rpx;
  211. }

欢迎在评论区留言讨论~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/802583
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号