当前位置：首页 > news >正文

uniapp 自定义tab栏切换

news 2025/7/27 8:13:50

1. uniapp 自定义tab栏切换

在这里插入图片描述

1.1. 实现思路

在tabbar的页面中，当用户进行左右滑动时，能够自动切换到相应的页面。这个过程可以通过Uniapp中的swiper组件实现也可以通过自定义完成。这里我使用的是原生态开发。

1.2. 实现步骤

1.2.1. view部分展示

首先，在项目中找到tabbar的页面，在template中添加以下代码
template v-for可以不用写在template模板。

<template><view class="page-layout"><tab-layout :tabIndex="tabIndex" :tabList="tabList"@sendTabData="receiveTabData"></tab-layout><!--首页--><scroll-view class="container-chat-items"scroll-y :scroll-top='scrollObj.scrollTop':style="{height: scrollObj.scrollHeight }"@scroll="handleScroll"><view class="page-content-layout"><tab-fragment class="title"v-show="tabIndex===0":dataList="dataList"></tab-fragment><tab-fragment2 class="title"v-show="tabIndex===1"></tab-fragment2></view></scroll-view></view>
</template>
<script>

1.2.2. JavaScript 内容

（1）toplist表示的是tab顶部的内容。
（2）list中展示的是跳转后的内容。

export default {components: {TabLayout,TabFragment,TabFragment2},data() {return {scrollObj: {scrollHeight: "100vh",scrollTop: 0,scrollOneTop: 0,scrollTwoTop: 0,isTabClick: false,isFirstClick: true,},tabIndex: 0,title: '我是首页',dataList: [{title: "标题45",content: "内容1"},{title: "标题2",content: "内容2"},{title: "标题3",content: "内容3"},{title: "标题4",content: "内容4"},{title: "标题5",content: "内容5"},{title: "标题6",content: "内容6"},{title: "标题7",content: "内容7"},{title: "标题8",content: "内容8"},{title: "标题9",content: "内容9"},{title: "标题10",content: "内容10"}],tabList: [{iconPath: '/static/main/icon_main_main_normal.png',selectedIconPath: '/static/main/icon_main_main_select.png',text: '首页',},{iconPath: '/static/main/icon_main_apply_normal.png',selectedIconPath: '/static/main/icon_main_apply_select.png',text: '审批',}],}},onReady() {pageUtil.setTitleBar('基础信息')},onLoad: function (e) {this.dataList = this.dataList.concat([{title: "标题12",content: "内容12"},{title: "标题22",content: "内容22"},{title: "标题32",content: "内容32"},{title: "标题42",content: "内容42"},{title: "标题52",content: "内容52"},{title: "标题62",content: "内容62"},{title: "标题72",content: "内容72"},{title: "标题82",content: "内容82"},{title: "标题92",content: "内容92"},{title: "标题102",content: "内容102",}])},methods: {/*** 获取tab发送过来的的数据* @param resData*/receiveTabData: function (resData) {let that = this;that.tabIndex = resDataconsole.log("点击tabIndex" + that.tabIndex)that.scrollObj.isTabClick = truelet scrollTop = ""switch (that.tabIndex) {case 0:scrollTop = that.scrollObj.scrollOneTopbreakcase 1:scrollTop = that.scrollObj.scrollTwoTopbreak}setTimeout(() => {that.scrollObj.scrollTop = scrollTop}, 5)},/*** 监听页面滑动*/handleScroll: function (e) {let that = this;//获取滚动条距离顶部的距离let