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

uniapp自定义tabBar

作者：盐析白兔 | 2024-02-15 19:41:55

赞

踩

uniapp自定义tabbar

目录

uniapp自定义tabBar方案

一、pages.json文件中添加tarBar

二、把原生的tabBar隐藏起来

三、自定义一个tabBar组件

四、全局引用组件

五、路由跳转

自定义switchTab

在app中$route找不到的问题

六、相关代码

七、可拖拽式

相关代码

uniapp自定义tabBar方案

该方案，可以在切换tabBar的时候，路由也跟着变化，方便平时进行页面测试使用，不过有个缺点，第一次切换的时候会出现闪烁现象。

解决闪烁的问题：

1、可以把tabBar和页面组件都放在单页中用v-if判断，进行切换，单页切换的缺点是不能进行路由跳转（不能路由跳转）

  1. <template>
  2. 	<view>
  3. 		<index></index>
  4. 		<my></my>
  5. 		<team></team>
  6. 		<promotion></promotion>
  7. 	   <tab-bar></tab-bar>
  8. 	</view>
  9. 	</view>
  10. </template>

 2、把组件注入App.vue中，实现全局引用，但是uniapp不建议在App.vue中使用页面组件，也不要使用，不然出现各种问题，uniapp不能像vue那样在App.vue使用router-view实现选项卡功能（不推荐）

3、 所以要同时实现首次不闪烁，而且可以进行路由切换的功能，目前不知道如何处理。（有个取巧的方式就是用uni-transition包裹一下，使得第一次加载有个过渡效果）

首次加载闪烁，严格意义上说，可以被认定为bug。小编在想能不能用vue的路由方式去实现router-view呢？因此尝试的去自定义router-view，却发现uniapp内置了路由，当想用vue插件方式，重写路由时，发现冲突了。

其实关于自定义，在uniapp中，官方目前不推荐大家去自定义的，如果业务场景需要根据不同权限，显示不同tabBar，我们可以去跟需求谈，换另外一方式，也是可以的。例如用下图的方式

（方案还有需要完善的地方，这里仅供大家参考）

一、pages.json文件中添加tarBar

因为需要用到tabBar跳转，因此可以往原来的tabBar.list中多添加几个,用于做判断是否tabBar切换(这里可以只添加路径，icon和text可以不需要)

二、把原生的tabBar隐藏起来

在App.vue中把原生的tabBar先隐藏起来，同时添加一个removeStorageSync，用于移除使用的tabBar的下标。

  1. onLaunch: function() {
  2. 	console.log('App Launch')
  3. 	uni.hideTabBar()
  4.    uni.removeStorageSync('selectedIndex');
  5. },

三、自定义一个tabBar组件

在components中新建一个tabBar.vue的页面，用来封装组件

HTML代码，这里循环遍历自己定义的tabBar.list(可根据需求来定义)

这里用了uni-transition组件包裹，这个组件需要到插件市场自行安装，这里用uni-transition是为了让加载的时候闪烁不那么明显。

  1. <template>
  2. 	<uni-transition mode-class="fade" :duration="200" :show="true">
  3. 		<view>
  4. 			<view class="tab-content">
  5. 				<slot />
  6. 			</view>
  7. 			<view class="tabbar">
  8. 				<view class="navigator">
  9. 					<view ref='warpper' class="warpper">
  10. 						<view ref="navItem" class="navigator-item" v-for="(item,index) in tabBar.list"
  11. 							:key="item.pagePath" @click="switchTab(item,index)" :data-index='index'>
  12. 							<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
  13. 							<img :src="item.selectedIconPath" class="icon" v-else>
  14. 							<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
  15. 						</view>
  16. 					</view>
  17. 				</view>
  18. 			</view>
  19. 		</view>
  20. 	</uni-transition>
  21.  
  22. </template>

data里面定义变量和循环列表，list即是自己定义的tabBar，和pages.json的tabBar写法一样

  1. data() {
  2. 			return {
  3. 				selectedIndex: uni.getStorageSync('selectedIndex') || 0, // 标记
  4. 				tabBar: {
  5. 					list: [{
  6. 							"pagePath": "pages/index/index",
  7. 							"iconPath": "/static/tabIcon/icon1.png",
  8. 							"selectedIconPath": "/static/tabIcon/icon2.png",
  9. 							"text": "首页"
  10. 						}, {
  11. 							"pagePath": "pages/team/team",
  12. 							"iconPath": "/static/tabIcon/icon3.png",
  13. 							"selectedIconPath": "/static/tabIcon/icon4.png",
  14. 							"text": "团队"
  15. 						}, {
  16. 							"pagePath": "pages/promotion/promotion",
  17. 							"iconPath": "/static/tabIcon/icon5.png",
  18. 							"selectedIconPath": "/static/tabIcon/icon6.png",
  19. 							"text": "推广圈"
  20. 						},
  21. 						{
  22. 							"pagePath": "pages/my/my",
  23. 							"iconPath": "/static/tabIcon/icon7.png",
  24. 							"selectedIconPath": "/static/tabIcon/icon8.png",
  25. 							"text": "我的"
  26. 						}
  27. 					]
  28. 				},
  29. 			}
  30. 		},

如果需要根据不同用户来渲染不同tabBar，可用vuex来保存tabBar的list列表

  1. const user_1 = [{
  2. 		"pagePath": "../pages/test/me",
  3. 		"iconPath": "../static/xxx.png",
  4. 		"selectedIconPath": "../static/xxx.png",
  5. 		"text": "me"
  6. 	}, {
  7. 		"pagePath": "../pages/test/you",
  8. 		"iconPath": "../static/xxx.png",
  9. 		"selectedIconPath": "../static/xxx.png",
  10. 		"text": "you"
  11. 	}, {
  12. 		"pagePath": "../pages/test/other",
  13. 		"iconPath": "../static/xxx.png",
  14. 		"selectedIconPath": "../static/xxx.png",
  15. 		"text": "other"
  16. 	},
  17. 	
  18. ]
  19. const user_2 = [{
  20. 		"pagePath": "../pages/test/our",
  21. 		"iconPath": "../static/xxx.png",
  22. 		"selectedIconPath": "../static/xxx.png",
  23. 		"text": "our"
  24. 	}, {
  25. 		"pagePath": "../pages/test/his",
  26. 		"iconPath": "../static/xxx.png",
  27. 		"selectedIconPath": "../static/xxx.png",
  28. 		"text": "his"
  29. 	}, 
  30. ]
  31. export default {
  32. 	user_1,
  33. 	user_1
  34. }

四、全局引用组件

往main.js注入组件

  1. // main.js
  2. import tabBar from 'components/tab-bar/tabBar.vue'
  3. Vue.component('tab-bar',tabBar) //挂载

在每一个页面中引入

  1. <template>
  2. 	<view>
  3. 		<view class="">我是首页</view>
  4. 		<tab-bar ref='tabbar'></tab-bar>
  5. 	</view>
  6. </template>
  1. <template>
  2. 	<view>
  3. 		<view class="">我是推广圈页</view>
  4. 		<tab-bar ref='tabbar'></tab-bar>
  5. 	</view>
  6. </template>
  1. <template>
  2. 	<view>
  3. 		<view class="">我是团队页</view>
  4. 		<tab-bar ref='tabbar'></tab-bar>
  5. 	</view>
  6. </template>

五、路由跳转

tabBar定义成了组件，因此需要一个全局变量来判断它的切换和路由的跳转。

首先，进入到uniapp的官方tabBar源码中，可以看到这样一段代码，下面的这段代码，就是路由跳转的依据，该监听方式只能在uniapp中有效，在app中无法监听，因此我们需要自定义跳转方法

  1.  watch: {
  2.     $route: {
  3.       immediate: true,
  4.       handler (to) {
  5.         if (to.meta.isTabBar) { // 判断是否属于tarBar
  6.           // this.__path__ = to.path
  7.           // 判断路由的路径和tarBar.list的pagePath是否相同，来确定一个全局的index
  8.           const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
  9.           if (index > -1) {
  10.             this.selectedIndex = index // 标记是第几个tarBar
  11.           }
  12.         }
  13.       }
  14.     }
  15.   },

后续要使用switchTab进行跳转的话，就需要到自定义的方法，毕竟已经自定义了tabBar，跳转方式也需要自定义。

自定义switchTab

  1.     switchTab(item, index) {
  2.       const navItem = this.$refs.navItem
  3.       let url = '/' + item.pagePath
  4.       let pagePath = url
  5.       uni.switchTab({
  6.         url
  7.       })
  8.       this.tabBar.list.forEach((v, i) => {
  9.         if (item.pagePath === v.pagePath) {
  10.           uni.setStorageSync('selectedIndex', index); // 注：下标需要异步保存起来
  11.         }
  12.       })
  13.     }

父组件中使用ref="tabBar"来获取子组件 

  1. <template>
  2. 	<view>
  3. 		<view class="">我是首页</view>
  4. 		<button @click="toMY">跳转</button>
  5. 		<tab-bar ref="tabBar"></tab-bar>
  6. 	</view>
  7. </template>

通过方法来触发子组件方法即可， 对象中的pagePath是与tabBar.list数组里面的pagePath是对应的。

  1. toMY() {
  2. 	this.$refs.tabBar.switchTab({
  3. 	   pagePath:'pages/team/team'
  4. 	})
  5.    // 注：这里需要把下标也写上，不然无法命中
  6.     uni.setStorageSync('selectedIndex', 5);
  7. },

在app中$route找不到的问题

打包到小程序之后，$route会像下面图片那样显示undefined，即在小程序中，是没有像$route这样的路由方式。那么，就不能用同步的方式，来监听index的变化。

需要用uni.setStorageSync('selectedIndex', index); 

  1.     switchTab(item, index) {
  2.       
  3.       // this.selectedIndex = index // 这样写是无效的
  4.       this.tabBar.list.forEach((v, i) => {
  5.         if (item.pagePath === v.pagePath) {
  6.           uni.setStorageSync('selectedIndex', index); // 注：下标需要异步保存起来
  7.         }
  8.       })
  9.     }

最后进入App.vue文件中，清除一下selectedIndex的缓存，不在tabBar.vue的created生命周期清除selectedIndex的原因是：只希望，每次重新进入程序后重置，tabBar的高亮重新回到第一个，而不是每次进入页面的重置，而且每次进入页面重置，是有问题。

  1. <script>
  2. 	export default {
  3. 		
  4. 		onLaunch: function() {
  5. 			uni.removeStorageSync('selectedIndex'); // 清除缓存
  6. 			uni.hideTabBar()
  7. 		},
  8. 	}
  9. </script>

六、相关代码

在App.vue中把原生的tabBar先隐藏起来和清除index

  1. onLaunch: function() {
  2. 	console.log('App Launch')
  3.     uni.removeStorageSync('selectedIndex'); // 清除缓存
  4. 	uni.hideTabBar()
  5. },

tabBar.vue

  1. <template>
  2. 	<uni-transition mode-class="fade" :duration="200" :show="true">
  3. 		<view>
  4. 			<view class="tab-content">
  5. 				<slot />
  6. 			</view>
  7. 			<view class="tabbar">
  8. 				<view class="navigator">
  9. 					<view ref='warpper' class="warpper">
  10. 						<view ref="navItem" class="navigator-item" v-for="(item,index) in tabBar.list"
  11. 							:key="item.pagePath" @click="switchTab(item,index)" :data-index='index'>
  12. 							<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
  13. 							<img :src="item.selectedIconPath" class="icon" v-else>
  14. 							<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
  15. 						</view>
  16. 					</view>
  17. 				</view>
  18. 			</view>
  19. 		</view>
  20. 	</uni-transition>
  21.  
  22. </template>
  23.  
  24. <script>
  25. 	export default {
  26. 		data() {
  27. 			return {
  28. 				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
  29. 				tabBar: {
  30. 					list: [{
  31. 							"pagePath": "pages/index/index",
  32. 							"iconPath": "/static/tabIcon/icon1.png",
  33. 							"selectedIconPath": "/static/tabIcon/icon2.png",
  34. 							"text": "首页"
  35. 						}, {
  36. 							"pagePath": "pages/team/team",
  37. 							"iconPath": "/static/tabIcon/icon3.png",
  38. 							"selectedIconPath": "/static/tabIcon/icon4.png",
  39. 							"text": "团队"
  40. 						}, {
  41. 							"pagePath": "pages/promotion/promotion",
  42. 							"iconPath": "/static/tabIcon/icon5.png",
  43. 							"selectedIconPath": "/static/tabIcon/icon6.png",
  44. 							"text": "推广圈"
  45. 						},
  46. 						{
  47. 							"pagePath": "pages/my/my",
  48. 							"iconPath": "/static/tabIcon/icon7.png",
  49. 							"selectedIconPath": "/static/tabIcon/icon8.png",
  50. 							"text": "我的"
  51. 						}
  52. 					]
  53. 				},
  54. 			}
  55. 		},
  56. 		methods: {
  57. 			switchTab(item, index) {
  58. 				let url = '/' + item.pagePath
  59. 				let pagePath = url
  60. 				uni.switchTab({url})
  61. 				this.tabBar.list.forEach((v, i) => {
  62. 					if (item.pagePath === v.pagePath) {
  63. 						uni.setStorageSync('selectedIndex', index);
  64. 					}
  65. 				})
  66. 			}
  67. 		},
  68. 	}
  69. </script>
  70.  
  71. <style>
  72. 	.tabbar {
  73. 		position: fixed;
  74. 		bottom: 0;
  75. 		left: 0;
  76. 		width: 100%;
  77. 		height: 100rpx;
  78. 		z-index: 999;
  79. 		background: #F5F5F5;
  80. 		border-top: 2rpx solid #eee;
  81. 	}
  82.  
  83. 	.navigator {
  84. 		width: 85%;
  85. 		margin: 0 auto;
  86. 		padding: 20rpx;
  87. 		overflow: hidden;
  88. 	}
  89.  
  90. 	.warpper {
  91. 		display: flex;
  92. 		justify-content: space-between;
  93. 		width: auto;
  94. 		transition-timing-function: ease-out;
  95. 	}
  96.  
  97. 	.navigator-item {
  98. 		display: flex;
  99. 		align-items: center;
  100. 		flex-direction: column;
  101. 		width: 50rpx;
  102. 		height: 100%;
  103. 	}
  104.  
  105. 	.item-text {
  106. 		margin-top: 6rpx;
  107. 		color: #777E86;
  108. 		font-size: 24rpx;
  109. 	}
  110.  
  111. 	.text-active {
  112. 		color: #2E92FD !important;
  113. 	}
  114.  
  115. 	.icon {
  116. 		width: 20px;
  117. 		height: 20px;
  118. 	}
  119. </style>

main.js注入组件

  1. // main.js
  2. import tabBar from 'components/tab-bar/tabBar.vue'
  3. Vue.component('tab-bar',tabBar) //挂载

在每一个页面中引入

page/index.vue 首页

  1. <template>
  2. 	<view>
  3. 		<view class="">我是首页</view>
  4. 		<button @click="toMY">跳转</button>
  5. 		<tab-bar ref="tabBar"></tab-bar>
  6. 	</view>
  7. </template>
  8.  
  9. <script>
  10. 	export default {
  11. 		data() {
  12. 			return {}
  13. 		},
  14. 		methods: {	
  15. 			toMY() {
  16. 				this.$refs.tabBar.switchTab({
  17. 					pagePath: 'pages/days/days'
  18. 				})
  19. 			  uni.setStorageSync('selectedIndex', 5);
  20. 			}
  21. 		}
  22.  
  23. 	}
  24. </script>
  1. <template>
  2. 	<view>
  3. 		<view class="">我是推广圈页</view>
  4. 		<tab-bar></tab-bar>
  5. 	</view>
  6. </template>
  1. <template>
  2. 	<view>
  3. 		<view class="">我是团队页</view>
  4. 		<tab-bar></tab-bar>
  5. 	</view>
  6. </template>

七、可拖拽式

当tabBar的数量比较多，希望可以进行拖拽，然后点击的某项时，希望他出现在视口中，那么我们可以改造一下代码。

首先调整一下css

  1. .navigator {
  2. 		width: 85%;
  3. 		margin: 0 auto;
  4. 		padding: 20rpx;
  5. 		overflow: hidden; /* 超出部分隐藏 */
  6. 	}
  7.  
  8. 	.warpper {
  9. 		display: flex;
  10. 		justify-content: flex-start;
  11. 		width: auto; /* 自适应 */
  12.         overflow-x: scroll;
  13. 	}
  14.  
  15. 	.navigator-item {
  16. 		display: flex;
  17. 		align-items: center;
  18. 		flex-direction: column;
  19. 		min-width: 190rpx; /* 设置每个的宽度 */
  20. 		height: 100%;
  21. 		flex-shrink: 0 /*  flex布局，关键 */
  22. 	}

可以看到，已实现拖拽功能，接下来就要实现点击的时候，点击项出现在视口中。

首先在computed中定义一个偏移（translateX）和一个样式（style），注：这个偏移需要在父组件中传值进去，因此需要一个offset

  1.     props: {
  2.       offset: {
  3.         type: Number,
  4.       default: 0
  5.       }
  6.     },  
  7.     computed: {
  8.       style() {
  9.         let style = {}
  10.         style.transform = `translateX(${this.translateX}rpx)`
  11.         return style
  12.       },
  13.       translateX: {
  14.         get(){
  15.           return this.offset
  16.         },
  17.         set(val){
  18.           this.$emit('changeOffset',val)
  19.           return val
  20.         }
  21.       }
  22.     },

页面中绑定style 

    <view ref='warpper' class="warpper" :style="style">

父组件传入值，而且是每个应用了tabBar的页面都需要写上，所以在这里使用到了mixins

  1. <template>
  2. 	<view>
  3. 		<view class="">我是团队页</view>
  4. 		<tab-bar :offset='offset' @changeOffset='changeOffset'></tab-bar>
  5. 	</view>
  6. </template>
  7.  
  8. <script>
  9. 	import tabbarMixins from '@/mixins/tabbarMixins.js'
  10. 	export default {
  11. 		mixins:[tabbarMixins],
  12. 		data() {
  13. 			return {}
  14. 		},
  15. 		methods: {
  16.  
  17. 		}
  18. 	}
  19. </script>
  1. <template>
  2. 	<view>
  3. 		<view class="">我是other</view>
  4. 		<tab-bar :offset='offset' @changeOffset='changeOffset'></tab-bar>
  5. 	</view>
  6. </template>
  7.  
  8. <script>
  9. 	import tabbarMixins from '@/mixins/tabbarMixins.js'
  10. 	export default {
  11. 		mixins:[tabbarMixins],
  12. 		data() {
  13. 			return {
  14. 				
  15. 			}
  16. 		},
  17. 		methods: {
  18. 			
  19. 		}
  20. 	}
  21. </script>

 tabbarMixins中写公共方法

  1. export default {
  2. 	data() {
  3. 		return {
  4. 			offset:0
  5. 		}
  6. 	},
  7. 	onShow() {
  8. 		const index = uni.getStorageSync('selectedIndex')
  9. 		this.offset = -95 * index // -95是一个项的宽度，这里可暂时写死
  10. 	},
  11. 	methods:{
  12. 		// 用于实时监控偏移值
  13. 		changeOffset(val){
  14. 			this.offset = val
  15. 		}
  16. 	}
  17. }

 

 当左右拖拽时添加一些渡效果，在warpper中绑定touch方法

  1.     <view ref='warpper' class="warpper" @touchstart="touchstart" @touchmove="touchmove"
  2.   @touchend="touchend" :style="style">

添加位置信息

  1.     data() {
  2.       return {
  3.         time: 0,
  4.         startPosition: 0,
  5.         offsetPosition: 0,
  6.         clientX: 0,
  7.         transitionDuration: 0,
  8.       }
  9.     },
  10.     computed: {
  11.       style() {
  12.         let style = {}
  13.         style.transform = `translateX(${this.translateX}rpx)`
  14.         style.transitionDuration = this.transitionDuration + 'ms'
  15.         return style
  16.       }

 编写touch方法

  1.     touchstart(e) {
  2.       this.time = new Date() // 保存一下开始拖拽时的时间
  3.       const warpper = this.$refs.warpper.$el.getBoundingClientRect()
  4.       const offsetLeft = e.target.offsetLeft
  5.       this.clientX = e.changedTouches[0].clientX
  6.       this.startPosition = this.clientX - this.translateX // 保存当前偏移了多少位置
  7.     },
  8.     touchmove(e) {
  9.       const clientX = e.changedTouches[0].clientX
  10.       this.transitionDuration = 0
  11.       this.translateX = clientX - this.startPosition // 实时改变位置
  12.     },
  13.     touchend(e) {
  14.       const currentTime = new Date()
  15.       const clientX = e.changedTouches[0].clientX
  16.       const width = this.$refs.navItem[0].$el.offsetWidth
  17.       const length = this.tabBar.list.length
  18.       const maxOffset = width * length / 2 - width / 2 // 最大偏移量
  19.       const lestOffset = width * (length - 1)
  20.       const changeTime = currentTime - this.time
  21.       const distance = Math.abs(clientX) - Math.abs(this.clientX)
  22.       
  23.       // 当按下的时间超过200ms，同时位置发生偏移大于20时，可判定为正在拖拽
  24.       if (changeTime > 200 && Math.abs(distance) > 20) {
  25.         this.translateX += 20 // 停止拖拽时，添加一点点阈值
  26.         if (this.translateX < 0 && Math.abs(this.translateX) > lestOffset) {
  27.           this.translateX = -maxOffset * 2 // 已经到最后的时候，放开手指，反弹
  28.         }
  29.         if (this.translateX > 0) {
  30.           this.translateX = 0
  31.         }
  32.         this.transitionDuration = 300 
  33.         setTimeout(() => {
  34.           this.transitionDuration = 0 // 用于实现，过渡效果
  35.         }, 300)
  36.  
  37.       }
  38.     },

以上就是实现可拖拽的实现方式，当然有一个缺点就是，点击的时候无法实现过渡效果，具体原因还未知

相关代码

  1. <template>
  2. 	<uni-transition mode-class="fade" :duration="200" :show="true">
  3. 		<view>
  4. 			<view class="tab-content">
  5. 				<slot />
  6. 			</view>
  7. 			<view class="tabbar">
  8. 				<view class="navigator">
  9. 					<view ref='warpper' class="warpper" @touchstart="touchstart" @touchmove="touchmove"
  10. 						@touchend="touchend" :style="style">
  11. 						<view ref="navItem" class="navigator-item" v-for="(item,index) in tabBar.list"
  12. 							:key="item.pagePath" @click="switchTab(item,index)" :data-index='index'>
  13. 							<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
  14. 							<img :src="item.selectedIconPath" class="icon" v-else>
  15. 							<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
  16. 						</view>
  17. 					</view>
  18. 				</view>
  19. 			</view>
  20. 		</view>
  21. 	</uni-transition>
  22.  
  23. </template>
  24.  
  25. <script>
  26. 	export default {
  27. 		props: {
  28. 			offset: {
  29. 				type: Number,
  30. 				default: 0
  31. 			}
  32. 		},
  33. 		data() {
  34. 			return {
  35. 				time: 0,
  36. 				startPosition: 0,
  37. 				clientX: 0,
  38. 				transitionDuration: 0,
  39. 				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
  40. 				tabBar: {
  41. 					list: [{
  42. 							"pagePath": "pages/index/index",
  43. 							"iconPath": "/static/tabIcon/icon1.png",
  44. 							"selectedIconPath": "/static/tabIcon/icon2.png",
  45. 							"text": "首页"
  46. 						}, {
  47. 							"pagePath": "pages/team/team",
  48. 							"iconPath": "/static/tabIcon/icon3.png",
  49. 							"selectedIconPath": "/static/tabIcon/icon4.png",
  50. 							"text": "团队"
  51. 						}, {
  52. 							"pagePath": "pages/promotion/promotion",
  53. 							"iconPath": "/static/tabIcon/icon5.png",
  54. 							"selectedIconPath": "/static/tabIcon/icon6.png",
  55. 							"text": "推广圈"
  56. 						},
  57. 						{
  58. 							"pagePath": "pages/my/my",
  59. 							"iconPath": "/static/tabIcon/icon7.png",
  60. 							"selectedIconPath": "/static/tabIcon/icon8.png",
  61. 							"text": "我的"
  62. 						},
  63. 						{
  64. 							"pagePath": "pages/other/other",
  65. 							"iconPath": "/static/tabIcon/icon1.png",
  66. 							"selectedIconPath": "/static/tabIcon/icon2.png",
  67. 							"text": "其他"
  68. 						},
  69. 						{
  70. 							"pagePath": "pages/days/days",
  71. 							"iconPath": "/static/tabIcon/icon3.png",
  72. 							"selectedIconPath": "/static/tabIcon/icon4.png",
  73. 							"text": "日历"
  74. 						}
  75. 					]
  76. 				},
  77. 			}
  78. 		},
  79. 		computed: {
  80. 			style() {
  81. 				let style = {}
  82. 				style.transform = `translateX(${this.translateX}rpx)`
  83. 				style.transitionDuration = this.transitionDuration + 'ms'
  84. 				return style
  85. 			},
  86. 			translateX: {
  87. 				get(){
  88. 					return this.offset
  89. 				},
  90. 				set(val){
  91. 					this.$emit('changeOffset',val)
  92. 					return val
  93. 				}
  94. 			}
  95. 		},
  96. 		methods: {
  97. 			touchstart(e) {
  98. 				this.time = new Date()
  99. 				const warpper = this.$refs.warpper.$el.getBoundingClientRect()
  100. 				const offsetLeft = e.target.offsetLeft
  101. 				this.clientX = e.changedTouches[0].clientX
  102. 				this.startPosition = this.clientX - this.translateX
  103. 			},
  104. 			touchmove(e) {
  105. 				const clientX = e.changedTouches[0].clientX
  106. 				this.transitionDuration = 0
  107. 				this.translateX = clientX - this.startPosition
  108. 			},
  109. 			touchend(e) {
  110. 				const currentTime = new Date()
  111. 				const clientX = e.changedTouches[0].clientX
  112. 				const width = this.$refs.navItem[0].$el.offsetWidth
  113. 				const length = this.tabBar.list.length
  114. 				const maxOffset = width * length / 2 - width / 2
  115. 				const lestOffset = width * (length - 1)
  116. 				const changeTime = currentTime - this.time
  117. 				const distance = Math.abs(clientX) - Math.abs(this.clientX)
  118. 				if (changeTime > 200 && Math.abs(distance) > 20) {
  119. 					this.translateX += 20
  120. 					if (this.translateX < 0 && Math.abs(this.translateX) > lestOffset) {
  121. 						this.translateX = -maxOffset * 2
  122. 					}
  123. 					if (this.translateX > 0) {
  124. 						this.translateX = 0
  125. 					}
  126. 					this.transitionDuration = 300
  127. 					setTimeout(() => {
  128. 						this.transitionDuration = 0
  129. 					}, 300)
  130.  
  131. 				}
  132. 			},
  133. 			/* 
  134. 			// 调整前
  135. 			methods: {
  136. 				switchTab(index, item) {
  137. 					let url = '/' + item.pagePath
  138. 					let pagePath = url
  139. 					const detail = {
  140. 						index,
  141. 						pagePath
  142. 					}
  143. 					if (this.$route.path !== url) {
  144. 						// this.__path__ = this.$route.path
  145. 						uni.switchTab({
  146. 							from: 'tabBar',
  147. 							url,
  148. 							detail
  149. 						})
  150. 					} else {
  151. 						// UniServiceJSBridge.emit('onTabItemTap', detail)
  152. 					}
  153. 					this.selectedIndex = index
  154. 					// this.$emit('switchTab', detail)
  155. 				}
  156. 			}, */
  157. 			// 调整后，1、调换入参顺序，方便传值，2、循环判断一下index，
  158. 			switchTab(item, index) {
  159. 				const navItem = this.$refs.navItem
  160. 				let url = '/' + item.pagePath
  161. 				let pagePath = url
  162. 				uni.switchTab({
  163. 					url
  164. 				})
  165. 				this.tabBar.list.forEach((v, i) => {
  166. 					if (item.pagePath === v.pagePath) {
  167. 						uni.setStorageSync('selectedIndex', index);
  168. 					}
  169. 				})
  170. 			}
  171. 		},
  172. 	}
  173. </script>
  174.  
  175. <style>
  176. 	.tabbar {
  177. 		position: fixed;
  178. 		bottom: 0;
  179. 		left: 0;
  180. 		width: 100%;
  181. 		height: 100rpx;
  182. 		z-index: 999;
  183. 		background: #F5F5F5;
  184. 		border-top: 2rpx solid #eee;
  185. 	}
  186.  
  187. 	.navigator {
  188. 		width: 85%;
  189. 		margin: 0 auto;
  190. 		padding: 20rpx;
  191. 		overflow: hidden;
  192. 	}
  193.  
  194. 	.warpper {
  195. 		display: flex;
  196. 		justify-content: flex-start;
  197. 		width: auto;
  198. 		transition-timing-function: ease-out;
  199. 		transition-duration: 300ms;
  200. 	}
  201.  
  202. 	.navigator-item {
  203. 		display: flex;
  204. 		align-items: center;
  205. 		flex-direction: column;
  206. 		min-width: 190rpx;
  207. 		height: 100%;
  208. 		flex-shrink: 0 
  209. 	}
  210.  
  211. 	.item-text {
  212. 		margin-top: 6rpx;
  213. 		color: #777E86;
  214. 		font-size: 24rpx;
  215. 	}
  216.  
  217. 	.text-active {
  218. 		color: #2E92FD !important;
  219. 	}
  220.  
  221. 	.icon {
  222. 		width: 20px;
  223. 		height: 20px;
  224. 	}
  225. </style>

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