收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

uni-app tab切换，tab样式。可以滑动实现页面切换的。tab菜单滑动切换。下方内容在剩下的高度滚动，上方的tab菜单固定不跟随滚动。左右切换 滑动菜单

1133人阅读 2020/11/9 13:49 总访问：5182825 评论：0 收藏：0 手机
分类: 前端

一：需要内容页可以滑动切换，tab菜单会跟着选中。但tab菜单固定显示，不需要滑动切换的

代码：

  1. <template>
  2.     <div class="body-view">
  4.       <view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
  5.         <view class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="(item.id - 1)" @click="switchMenu(item.id - 1)">
  6.           <view :class="currentTab === (item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
  7.             <span class="menu-topic-text">{{ item.name }}</span>
  8.             <view class="menu-topic-bottom">
  9.               <view class="menu-topic-bottom-color"></view>
  10.             </view>
  11.           </view>
  12.         </view>
  13.       </view>
  15.       <!-- 内容 -->
  16.       <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
  17.         <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
  18.           <div class="swiper-item">
  19.             {{ item.content }}
  20.           </div>
  21.         </swiper-item>
  22.       </swiper>
  23.     </div>
  24.   </template>
  26.   <script setup lang="ts">
  27.   import { ref, onMounted } from 'vue';
  29.   const tabs = ref<any>([
  30.     { id: 1, name: '日数据' },
  31.     { id: 2, name: '周数据' },
  32.     { id: 3, name: '月数据' },
  33.   ])
  35.   const currentTab = ref(0);
  36.   const tabCurrent = ref('tabNum1');
  38.   const swiperDateList = ref<any>([
  39.     { id: 1, content: '日数据内容' },
  40.     { id: 2, content: '周数据内容' },
  41.     { id: 3, content: '月数据内容' },
  42.   ])
  44.   const switchMenu = (id: number) => {
  45.     currentTab.value = id;
  46.     console.log(11, id);
  47.     tabCurrent.value = 'tabNum' + id;
  48.   };
  50.   const swiperChange = (e: { detail: { current: number } }) => {
  51.     console.log(22, e.detail.current);
  52.     const index = e.detail.current;
  53.     switchMenu(index);
  54.   };
  56.   onMounted(() => {
  57.     // Perform any initialization logic here
  58.   });
  59.   </script>
  61.   <style scoped lang="scss">
  62.   .body-view {
  63.     height: 100vh;
  64.     width: 100%;
  65.     display: flex;
  66.     flex: 1;
  67.     flex-direction: column;
  68.     overflow: hidden;
  69.     align-items: flex-start;
  70.     justify-content: center;
  71.   }
  74.   .top-menu-view {
  75.     display: flex;
  76.     white-space: nowrap;
  77.     width: 100%;
  78.     background-color: #FFFFFF;
  79.     height: 86rpx;
  80.     line-height: 86rpx;
  81.     justify-content: space-between;
  83.     .menu-topic-view {
  84.       display: inline-block;
  85.       white-space: nowrap;
  86.       height: 86rpx;
  87.       position: relative;
  89.       .menu-topic-text {
  90.         font-size: 30rpx;
  91.         color: #303133;
  92.         padding: 10rpx 40rpx;
  93.       }
  95.       .menu-topic-bottom {
  96.         position: absolute;
  97.         bottom: 0;
  98.         width: 100%;
  100.         .menu-topic-bottom-color {
  101.           width: 40rpx;
  102.           height: 4rpx;
  103.         }
  104.       }
  106.       .menu-topic-act .menu-topic-bottom {
  107.         display: flex;
  108.         justify-content: center;
  109.       }
  111.       .menu-topic-act .menu-topic-bottom-color {
  112.         background: #3d7eff;
  113.       }
  114.     }
  115.   }
  117.   .swiper-box-list {
  118.     width: 100%;
  119.     padding-top: 200rpx;
  120.     flex: 1;
  122.     .swiper-topic-list {
  123.       width: 100%;
  124.     }
  125.   }
  126.   </style>

二：需要tab可以滑动切换的，内容页不需要左右滑动切换。下方内容在剩下的高度滚动，上方的tab菜单固定不跟随滚动

代码：

  1. <template>
  2.   <!-- 解决滚动穿透 -->
  3.   <page-meta :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"></page-meta>
  5.   <view class="body-view">
  6.     <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
  7.       <div class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="(item.id - 1)"
  8.         @click="switchMenu(item.id - 1)">
  9.         <div :class="currentTab === (item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
  10.           <span class="menu-topic-text">{{ item.name }}</span>
  11.           <div class="menu-topic-bottom">
  12.             <div class="menu-topic-bottom-color"></div>
  13.           </div>
  14.         </div>
  15.       </div>
  16.     </scroll-view>
  18.     <view class="class-info">
  19.       <view class="ci-className">23级移动互联应用技术1班</view>
  20.       <image :src="`${config.imgBaseUrl}/mp-weixin/smartedu-growing/teacher-icon/arrow.png`"
  21.         class="class-info-icon-arrow" />
  22.     </view>
  24.     <view style="">
  25.       <scroll-view scroll-y="true" style="height:calc(100vh - 160rpx);">
  26.         <view class="do-item-wrap">
  27.           <view class="do-item" v-for="(initem, index) in 13" :key="index">
  28.             <view class="di-task-desc">
  29.               <view class="di-td-index">{{ index + 1 }}</view>
  30.               <view class="di-td-title">体能测试—跑步（女子800米/男子1000米）</view>
  31.             </view>
  32.             <view class="di-task-spline"></view>
  33.             <view class="di-task-statictics">
  34.               <view class="di-ts-count">
  35.                 <view class="di-tst-desc">完成次数：</view>
  36.                 <view class="di-tst-value">2次</view>
  37.               </view>
  38.               <view class="di-ts-buttons">
  39.                 <view class="di-tst-details" @tap="popupMethods.showMonthTaskDetails">详情</view>
  40.                 <view class="di-tst-tocomplete" @tap="methods.toCompletePage" v-if="index < 5">去完成</view>
  41.               </view>
  42.             </view>
  43.           </view>
  44.         </view>
  45.       </scroll-view>
  46.     </view>
  48.     <uni-popup ref="monthTaskDetailsPopup" background-color="#fff" border-radius="60rpx 60rpx 0rpx 0rpx;" type="bottom"
  49.       @change="methods.change">
  50.       <monthTaskDetails @closePopup="popupMethods.closeMonthTaskDetails" title="参加班级扫除道"> </monthTaskDetails>
  51.     </uni-popup>
  53.   </view>
  54. </template>
  56. <script setup lang="ts">
  57. import { ref, onMounted, reactive } from 'vue';
  58. import config from '@/common/config.ts'
  60. import monthTaskDetails from './component/monthTaskDetails.vue'
  62. const tabs = ref<any>([
  63.   { id: 1, name: '全部' },
  64.   { id: 2, name: '德' },
  65.   { id: 3, name: '智' },
  66.   { id: 4, name: '体' },
  67.   { id: 5, name: '美' },
  68.   { id: 6, name: '劳' },
  69.   { id: 7, name: '技术' },
  70.   { id: 8, name: '健康' },
  71.   { id: 9, name: '思维' },
  72. ])
  74. const currentTab = ref(0);
  75. const tabCurrent = ref('tabNum1');
  77. const state = reactive({
  78.   popupShow: false,
  79. })
  81. const switchMenu = (id: number) => {
  82.   currentTab.value = id;
  83.   // console.log(11, id);
  84.   tabCurrent.value = 'tabNum' + id;
  85. };
  88. onMounted(() => {
  90. });
  92. const methods = {
  93.   change: function (e: any) {
  94.     state.popupShow = e.show
  95.   },
  96.   toCompletePage: function () {
  97.     uni.navigateTo({
  98.       url: "/pages/student/toDoMonthTask"
  99.     })
  100.   }
  101. }
  103. let monthTaskDetailsPopup = ref()
  104. const popupMethods = {
  105.   // 打开弹窗
  106.   showMonthTaskDetails: () => {
  107.     monthTaskDetailsPopup.value.open()
  108.   },
  109.   // 关闭弹窗
  110.   closeMonthTaskDetails: () => {
  111.     monthTaskDetailsPopup.value.close()
  112.   }
  113. }
  117. </script>
  119. <style scoped lang="scss">
  120. .body-view {
  121.   // min-height: 100vh;
  122.   // width: 100%;
  123.   display: flex;
  124.   height: 100vh;
  125.   flex-direction: column;
  126.   // overflow: hidden;
  127.   // align-items: flex-start;
  128.   // justify-content: center;
  129. }
  131. .top-menu-view {
  132.   display: flex;
  133.   position: fixed;
  134.   top: 0rpx;
  135.   left: 0;
  136.   white-space: nowrap;
  137.   width: 100%;
  138.   background-color: #FFFFFF;
  139.   height: 86rpx;
  140.   line-height: 86rpx;
  141.   // border-top: 1rpx solid #d8dbe6;
  143.   .menu-topic-view {
  144.     display: inline-block;
  145.     white-space: nowrap;
  146.     height: 86rpx;
  147.     position: relative;
  149.     .menu-topic-text {
  150.       font-size: 30rpx;
  151.       color: #303133;
  152.       padding: 10rpx 40rpx;
  153.     }
  155.     .menu-topic-bottom {
  156.       position: absolute;
  157.       bottom: 0;
  158.       width: 100%;
  160.       .menu-topic-bottom-color {
  161.         width: 40rpx;
  162.         height: 4rpx;
  163.       }
  164.     }
  166.     .menu-topic-act .menu-topic-bottom {
  167.       display: flex;
  168.       justify-content: center;
  169.     }
  171.     .menu-topic-act .menu-topic-bottom-color {
  172.       background: #3d7eff;
  173.     }
  174.   }
  175. }
  178. .class-info {
  179.   margin-top: 100rpx;
  180.   // top: 100rpx;
  181.   // position: fixed;
  182.   width: 100%;
  183.   height: 77rpx;
  184.   background: #FFFFFF;
  187.   font-size: 26rpx;
  188.   color: #313960;
  189.   display: flex;
  190.   align-items: center;
  191.   justify-content: space-between;
  193.   .ci-className {
  194.     margin-left: 20rpx;
  195.   }
  197.   .class-info-icon-arrow {
  198.     width: 24rpx;
  199.     height: 13rpx;
  200.     margin-right: 20rpx;
  201.   }
  202. }
  205. .do-item-wrap {
  206.   // width: 100%;
  207.   padding-left: 20rpx;
  208.   padding-right: 20rpx;
  209.   padding-bottom: 20rpx;
  211.   .di-task-spline {
  212.     height: 1rpx;
  213.     background: #000000;
  214.     opacity: 0.1;
  215.     margin-top: 20rpx;
  216.     margin-left: 20rpx;
  217.     margin-right: 20rpx;
  218.   }
  221.   .do-item {
  222.     width: 100%;
  223.     height: 161rpx;
  224.     background: #FFFFFF;
  225.     margin-top: 20rpx;
  227.     .di-task-desc {
  228.       display: flex;
  229.       padding-left: 20rpx;
  230.       padding-top: 20rpx;
  232.       .di-td-index {
  233.         width: 34rpx;
  234.         height: 34rpx;
  235.         background: #4D9DF5;
  236.         border-radius: 10rpx 10rpx 10rpx 10rpx;
  237.         color: #FFFFFF;
  238.         font-size: 26rpx;
  239.         text-align: center;
  240.         line-height: 34rpx;
  241.       }
  243.       .di-td-title {
  244.         font-size: 28rpx;
  245.         color: #313960;
  246.         margin-left: 20rpx;
  247.       }
  248.     }
  250.     .di-task-statictics {
  251.       display: flex;
  252.       align-items: center;
  253.       justify-content: space-between;
  254.       margin-top: 26rpx;
  255.       padding-left: 20rpx;
  256.       padding-right: 20rpx;
  258.       .di-ts-count {
  259.         display: flex;
  260.         font-size: 24rpx;
  262.         .di-tst-desc {
  263.           color: rgba(0, 0, 0, 0.5)
  264.         }
  266.         .di-tst-value {
  267.           color: #313960;
  268.         }
  270.       }
  272.       .di-ts-buttons {
  273.         display: flex;
  275.         .di-tst-details {
  276.           width: 90rpx;
  277.           height: 40rpx;
  278.           border-radius: 35rpx 35rpx 35rpx 35rpx;
  279.           border: 2rpx solid #4D9DF5;
  280.           font-size: 24rpx;
  281.           color: #4D9DF5;
  282.           text-align: center;
  283.           line-height: 40rpx;
  284.         }
  286.         .di-tst-tocomplete {
  287.           text-align: center;
  288.           line-height: 40rpx;
  289.           color: #67C23A;
  290.           font-size: 24rpx;
  291.           width: 114rpx;
  292.           height: 40rpx;
  293.           border-radius: 35rpx 35rpx 35rpx 35rpx;
  294.           border: 2rpx solid #67C23A;
  295.           margin-left: 15rpx;
  296.         }
  297.       }
  299.     }
  300.   }
  301. }
  302. </style>

三：tab菜单和内容页都可以左右滑动切换的

非常基础版本的代码，需要改造

  1. <template>
  2.   <div class="body-view">
  3.     <!-- 使用scroll-view实现tabs滑动切换 -->
  4.     <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
  5.       <div class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="(item.id - 1)" @click="switchMenu(item.id - 1)">
  6.         <div :class="currentTab === (item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
  7.           <span class="menu-topic-text">{{ item.name }}</span>
  8.           <div class="menu-topic-bottom">
  9.             <div class="menu-topic-bottom-color"></div>
  10.           </div>
  11.         </div>
  12.       </div>
  13.     </scroll-view>
  14.     <!-- 内容 -->
  15.     <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
  16.       <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
  17.         <div class="swiper-item">
  18.           {{ item.content }}
  19.         </div>
  20.       </swiper-item>
  21.     </swiper>
  22.   </div>
  23. </template>
  25. <script setup lang="ts">
  26. import { ref, onMounted } from 'vue';
  28. const tabs = ref<any>([
  29.   { id: 1, name: '推荐' },
  30.   { id: 2, name: '交通交通' },
  31.   { id: 3, name: '住房' },
  32.   { id: 4, name: '社会保障' },
  33.   { id: 5, name: '民生热点' },
  34.   { id: 6, name: '即日头条' },
  35.   { id: 7, name: '新闻联播' },
  36. ])
  38. const currentTab = ref(0);
  39. const tabCurrent = ref('tabNum1');
  41. const swiperDateList = ref<any>([
  42.   { id: 1, content: '推荐' },
  43.   { id: 2, content: '交通交通' },
  44.   { id: 3, content: '住房' },
  45.   { id: 4, content: '社会保障' },
  46.   { id: 5, content: '民生热点' },
  47.   { id: 6, content: '即日头条' },
  48.   { id: 7, content: '新闻联播' },
  49. ])
  51. const switchMenu = (id: number) => {
  52.   currentTab.value = id;
  53.   console.log(11, id);
  54.   tabCurrent.value = 'tabNum' + id;
  55. };
  57. const swiperChange = (e: { detail: { current: number } }) => {
  58.   console.log(22, e.detail.current);
  59.   const index = e.detail.current;
  60.   switchMenu(index);
  61. };
  63. onMounted(() => {
  64.   // Perform any initialization logic here
  65. });
  66. </script>
  68. <style scoped lang="scss">
  69. .body-view {
  70.   height: 100vh;
  71.   width: 100%;
  72.   display: flex;
  73.   flex: 1;
  74.   flex-direction: column;
  75.   overflow: hidden;
  76.   align-items: flex-start;
  77.   justify-content: center;
  78. }
  80. .top-menu-view {
  81.   display: flex;
  82.   position: fixed;
  83.   top: 100rpx;
  84.   left: 0;
  85.   white-space: nowrap;
  86.   width: 100%;
  87.   background-color: #FFFFFF;
  88.   height: 86rpx;
  89.   line-height: 86rpx;
  90.   border-top: 1rpx solid #d8dbe6;
  92.   .menu-topic-view {
  93.     display: inline-block;
  94.     white-space: nowrap;
  95.     height: 86rpx;
  96.     position: relative;
  98.     .menu-topic-text {
  99.       font-size: 30rpx;
  100.       color: #303133;
  101.       padding: 10rpx 40rpx;
  102.     }
  104.     .menu-topic-bottom {
  105.       position: absolute;
  106.       bottom: 0;
  107.       width: 100%;
  109.       .menu-topic-bottom-color {
  110.         width: 40rpx;
  111.         height: 4rpx;
  112.       }
  113.     }
  115.     .menu-topic-act .menu-topic-bottom {
  116.       display: flex;
  117.       justify-content: center;
  118.     }
  120.     .menu-topic-act .menu-topic-bottom-color {
  121.       background: #3d7eff;
  122.     }
  123.   }
  124. }
  126. .swiper-box-list {
  127.   width: 100%;
  128.   padding-top: 200rpx;
  129.   flex: 1;
  131.   .swiper-topic-list {
  132.     width: 100%;
  133.   }
  134. }
  135. </style>

四：备注

更多样式请参考，存储的模板


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

layui tab切换更改同一个内容
layui tab切换时如何更改同一个内容呢，不用一个tab对应一个内容，就相当于改变同一个内容，其实很简单就是只留layui-tab-c...

vue路由实现一个二级菜单。vue页面切换，vue子页面切换。vue菜单选中
效果如下：这种二级菜单或者三级菜单如果我们使用.net 的mvc来实现就很简单，整两个布局页可以轻松搞定来试试使用vue的路由...

CPU上下文切换
CPU上下文切换[TOC] （0） CPU寄存器，是内置的容量小、但速度极快的内存。而程序计数器，再则是用来存储CPU正在执行的...

vue 动态切换class
vue动态切换class方式一：&lt;div :class=&quot;{ active: isActive }&quot;&gt;&lt;/div&gt;表示active 是否存在，取决于 ...

Vscode 切换工作目录
Vscode 切换工作目录[TOC] Ctrl+Shift+P 即可选择运行项目

div 点击事件 切换div class 和 style
$(&quot;.but&quot;).on(&quot;click&quot;,function(){vardiv=$(&quot;div[class=&#39;but&#39;]&quot;);//获取全部class...

Angular路由复用策略 (切换tabs页面内容不丢失，保持原来状态)
一、引言 路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；当然在绝大多数场景下这是合理的。进入...

dbvis切换数据库安装驱动与虚拟机交互
前言：hello 大家好我是小付 又和大家见面了，今天和大家分享一个踩坑日常dbvis 没有安装驱动导致连接不上数据库。dbvis是...

CPU上下文切换（下）
CPU上下文切换（下）[TOC] 查看系统的上下文切换情况 vmstat工具介绍 vmstat是一个常用的系统性能分析工具，主要用来...

spring boot 自动配置之切换内置服务web
1、修改pom.xml的配置就是把tomcat服务器换成其他服务器，总共有四种服务器2、直接启动

Git 的版本管理04——01切换版本
查看所有分支的所有记录（包括已经被删除的commit记录）：git reflog切换版本：git reset --hard 唯一索引接着Git常用命令0...

Git 的版本管理04——02创建、切换、合并、删除分支
查看分支下的文件：ls查看所有分支：git branch创建分支：git branch 分支名切换分支：git checkout 分支名合并分支：git m...

\\访问文件访问共享文件夹 怎么切换账号
设置访问共享文件夹账户信息的位置在：控制面板—&gt;用户帐户—&gt;管理你的凭据—&gt;windows凭据 管理你的凭据在这里打...

vue切换菜单，vue菜单选中。跳转页面通过原生js设置选中样式。vue中使用原生js方法。js 找到当前对象的兄弟对象。js获取子节点。js获取父节点。js获取当前元素的同级节点
vue切换菜单,跳转页面通过原生js设置选中样式可以利用上面那个js获取当前元素的同级节点后先设置默认的样式，然后在设置点...

vue 布局页，vue模板页，页面跳转，子页面切换，页面切换。页面模板，布局模板。vue路由配置
vue里边点击菜单切换页面的效果，其实和mvc里边的布局页很类似。使用router-view来挖坑，和mvc里边的@RenderBody()挖坑一样...