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

uni tabs组件，tab选项卡滑动切换

作者：知新_RL | 2024-03-25 20:53:34

赞

踩

uni tabs

效果展示：

效果描述：

1.tabs点击和左右切换滑动，

2.uni框架，思路是找寻存在的tab组件，发现uni组件库没有

参考链接：uniapp实现tab选项卡 

核心思路：

技术背景：

uni框架，基于vue2语法

完整代码：

  1. <template>
  2. 	<view class="content">
  3. 		<view class="head">
  4. 			<view class="my_information">
  5. 				<view class="name">
  6. 					<view class="toBack"></view>
  7. 					<view class="title_name">设备状态监控</view>
  8. 					<view class="ship_change">
  9. 						<uni-data-select v-model="shipGuid" :localdata="shipList" @change="changeShip"
  10. 							placeholder="请选择船舶"></uni-data-select>
  11. 					</view>
  12. 				</view>
  13. 				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation>
  14. 					<view class="modules_titles">
  15. 						<view class="lists" v-for="(item, index) in modelList" :key="index"
  16. 							:class="currentIndex == index ? 'module_active' : ''" @click="changeModules(index)">
  17. 							{{ item.name }}
  18. 						</view>
  19. 					</view>
  20. 				</scroll-view>
  21. 			</view>
  22. 		</view>
  23. 		<!-- <view class="modules_content">
  24. 			<view class="modules_components">
  25. 				<component :is="currentComponents"></component>
  26. 			</view>
  27. 		</view> -->
  28. 		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
  29. 		<swiper @change="change" :current="isActive" class="modules_content">
  30. 			<swiper-item class="swiperitem-content">
  31. 				<scroll-view scroll-y style="height: 100%;">
  32. 					<view class="nav_item">
  33. 						<block>
  34. 							<view class="echart_box">
  35. 								<pieChart :option="hostOpt1" echartsId="IndexA" height="300rpx"></pieChart>
  36. 							</view>
  37. 							<view class="echart_box"
  38. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  39. 								<view class="termp_home">
  40. 									<view class="title">左滑油温度</view>
  41. 									<pieChart :option="hostOpt2" echartsId="IndexB" height="300rpx"></pieChart>
  42. 								</view>
  43. 								<view class="termp_home">
  44. 									<view class="title">右滑油温度</view>
  45. 									<pieChart :option="hostOpt22" echartsId="Indexb" height="300rpx"></pieChart>
  46. 								</view>
  47. 							</view>
  48. 							<view class="echart_box" style="margin-top: 30rpx;">
  49. 								<pieChart :option="hostOpt3" echartsId="IndexC" height="300rpx"></pieChart>
  50. 							</view>
  51. 						</block>
  52. 					</view>
  53. 				</scroll-view>
  54. 			</swiper-item>
  55. 			<swiper-item class="swiperitem-content">
  56. 				<scroll-view scroll-y style="height: 100%;">
  57. 					<view class="nav_item">
  58. 						<block>
  59. 							<view class="echart_box"
  60. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  61. 								<view class="termp_home">
  62. 									<view class="title">左淡水排温温度</view>
  63. 									<pieChart :option="hostOpt2" echartsId="IndexD" height="300rpx"></pieChart>
  64. 								</view>
  65. 								<view class="termp_home">
  66. 									<view class="title">右淡水排温温度</view>
  67. 									<pieChart :option="hostOpt22" echartsId="Indexd" height="300rpx"></pieChart>
  68. 								</view>
  69. 							</view>
  70. 							<view class="echart_box"
  71. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  72. 								<view class="termp_home">
  73. 									<view class="title">左淡水进温温度</view>
  74. 									<pieChart :option="hostOpt22" echartsId="IndexE" height="300rpx"></pieChart>
  75. 								</view>
  76. 								<view class="termp_home">
  77. 									<view class="title">右淡水进温温度</view>
  78. 									<pieChart :option="hostOpt22" echartsId="Indexe" height="300rpx"></pieChart>
  79. 								</view>
  80. 							</view>
  81. 							<view class="echart_box"
  82. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  83. 								<view class="termp_home">
  84. 									<view class="title">左排烟管排气温度</view>
  85. 									<view class="container">
  86. 										<block v-for="(item, index) in 2" :key="index">
  87. 											<view class="item">
  88. 												<div class="item_xuhao">#{{ index + 1 }}</div>
  89. 												<div class="item_right">
  90. 													<div class="num">50.5</div>
  91. 													<div class="unit">゜C</div>
  92. 												</div>
  93. 											</view>
  94. 										</block>
  95. 									</view>
  96. 								</view>
  97. 								<view class="termp_home">
  98. 									<view class="title">右排烟管排气温度</view>
  99. 									<view class="container">
  100. 										<block v-for="(item, index) in 2" :key="index">
  101. 											<view class="item">
  102. 												<div class="item_xuhao">#{{ index + 1 }}</div>
  103. 												<div class="item_right">
  104. 													<div class="num">50.5</div>
  105. 													<div class="unit">゜C</div>
  106. 												</div>
  107. 											</view>
  108. 										</block>
  109. 									</view>
  110. 								</view>
  111. 							</view>
  112. 						</block>
  113. 					</view>
  114. 				</scroll-view>
  115. 			</swiper-item>
  116. 			<swiper-item class="swiperitem-content">
  117. 				<scroll-view scroll-y style="height: 100%;">
  118. 					<view class="nav_item">
  119. 						<block>
  120. 							<view class="echart_box">
  121. 								<pieChart :option="altOpt1" echartsId="AltA" height="300rpx"></pieChart>
  122. 							</view>
  123. 							<view class="echart_box"
  124. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  125. 								<view class="termp_home">
  126. 									<view class="title">左排温温度</view>
  127. 									<pieChart :option="altOpt2" echartsId="AltB" height="300rpx"></pieChart>
  128. 								</view>
  129. 								<view class="termp_home">
  130. 									<view class="title">右排温温度</view>
  131. 									<pieChart :option="altOpt22" echartsId="Altb" height="300rpx"></pieChart>
  132. 								</view>
  133. 							</view>
  134. 							<view class="echart_box" style="margin-top: 30rpx;">
  135. 								<pieChart :option="altOpt3" echartsId="AltC" height="300rpx"></pieChart>
  136. 							</view>
  137. 						</block>
  138. 					</view>
  139. 				</scroll-view>
  140. 			</swiper-item>
  141. 			<swiper-item class="swiperitem-content">
  142. 				<scroll-view scroll-y style="height: 100%;">
  143. 					<view class="nav_item">
  144. 						<block>
  145. 							<view class="echart_box">
  146. 								<pieChart :option="rudOpt1" echartsId="RudderA" height="300rpx"></pieChart>
  147. 							</view>
  148. 							<view class="echart_box"
  149. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  150. 								<view class="termp_home">
  151. 									<view class="title">左液压油温度</view>
  152. 									<pieChart :option="rudOpt2" echartsId="RudderB" height="300rpx"></pieChart>
  153. 								</view>
  154. 								<view class="termp_home">
  155. 									<view class="title">右液压油温度</view>
  156. 									<pieChart :option="rudOpt22" echartsId="Rudderb" height="300rpx"></pieChart>
  157. 								</view>
  158. 							</view>
  159. 							<view class="echart_box" style="margin-top: 30rpx;">
  160. 								<pieChart :option="rudOpt3" echartsId="RudderC" height="300rpx"></pieChart>
  161. 							</view>
  162. 						</block>
  163. 					</view>
  164. 				</scroll-view>
  165. 			</swiper-item>
  166. 			<swiper-item class="swiperitem-content">
  167. 				<scroll-view scroll-y style="height: 100%;">
  168. 					<view class="nav_item">
  169. 						<block>
  170. 							<view class="echart_box">
  171. 								<pieChart :option="rudOpt4" echartsId="RudderD" height="300rpx"></pieChart>
  172. 							</view>
  173. 							<view class="echart_box"
  174. 								style="width: 100%;display: flex;justify-content: space-evenly;align-items: center;">
  175. 								<view class="termp_home">
  176. 									<view class="title">左滑油温度</view>
  177. 									<pieChart :option="rudOpt5" echartsId="RudderE" height="300rpx"></pieChart>
  178. 								</view>
  179. 								<view class="termp_home">
  180. 									<view class="title">右滑油温度</view>
  181. 									<pieChart :option="rudOpt55" echartsId="Ruddere" height="300rpx"></pieChart>
  182. 								</view>
  183. 							</view>
  184. 							<view class="echart_box" style="margin-top: 30rpx;">
  185. 								<pieChart :option="rudOpt6" echartsId="RudderF" height="300rpx"></pieChart>
  186. 							</view>
  187. 						</block>
  188. 					</view>
  189. 				</scroll-view>
  190. 			</swiper-item>
  191. 			<!-- <swiper-item class="swiperitem-content">
  192. 				<scroll-view scroll-y style="height: 100%;">
  193. 					<view class="nav_item">
  194. 						另一个页面
  195. 					</view>
  196. 				</scroll-view>
  197. 			</swiper-item> -->
  198. 		</swiper>
  199. 	</view>
  200. </template>
  201. <script>
  202. import host from "@/components/IndexComponents/host.vue"
  203. import alternator from "@/components/IndexComponents/alternator.vue"
  204. import rudder from "@/components/IndexComponents/rudder.vue"
  205. import store from '@/store/index.js'
  206. import pieChart from '@/components/graph/pieChart.vue';
  207. import { pieSpeed, tempBar } from "@/utils/chart.js"
  208.  
  209. export default {
  210. 	components: {
  211. 		host,
  212. 		alternator,
  213. 		rudder,
  214. 		pieChart,
  215. 	},
  216. 	data() {
  217. 		return {
  218. 			currentIndex: 0,//选中的设备类型
  219. 			isActive: 0,//选中的swiper
  220. 			// currentComponents: "host",
  221. 			modelList: [
  222. 				{
  223. 					name: "主机状态",
  224. 					components: "host",
  225. 				},
  226. 				{
  227. 					name: "发电机状态",
  228. 					components: "alternator",
  229. 				},
  230. 				{
  231. 					name: "舵桨轴系",
  232. 					components: "rudder",
  233. 				},
  234. 			],
  235. 			shipGuid: "",
  236. 			shipList: [],
  237. 			//主机
  238. 			hostOpt1: {},
  239. 			hostOpt2: {},
  240. 			hostOpt22: {},
  241. 			hostOpt3: {},
  242. 			//发电机
  243. 			altOpt1: {},
  244. 			altOpt2: {},
  245. 			altOpt22: {},
  246. 			altOpt3: {},
  247. 			//舵桨轴系
  248. 			rudOpt1: {},
  249. 			rudOpt2: {},
  250. 			rudOpt22: {},
  251. 			rudOpt3: {},
  252. 			rudOpt4: {},
  253. 			rudOpt5: {},
  254. 			rudOpt55: {},
  255. 			rudOpt6: {},
  256. 		}
  257. 	},
  258. 	created() {
  259. 		this.getApiData()
  260. 	},
  261. 	methods: {
  262. 		// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
  263. 		changeModules(index) {
  264. 			// this.currentIndex = index;
  265. 			// this.currentComponents = this.modelList[index].components
  266. 			switch (index) {
  267. 				case 0:
  268. 					this.isActive = 0
  269. 					break;
  270. 				case 1:
  271. 					this.isActive = 2
  272. 					break;
  273. 				case 2:
  274. 					this.isActive = 3
  275. 					break;
  276. 				default:
  277. 					this.isActive = 0
  278. 					break;
  279. 			}
  280. 		},
  281. 		changeShip() {
  282. 			console.log(11, this.shipGuid)
  283. 			this.$store.commit('setShipGuids', this.shipGuid);
  284. 		},
  285. 		// swiper滑动时，获取其索引，也就是第几个
  286. 		change(e) {
  287. 			const { current } = e.detail;
  288. 			this.isActive = current;
  289. 		},
  290. 		getApiData() {
  291. 			console.log('api parseInt(1000/10)>>>', parseInt(3000 / 10));
  292. 			let host1 = [
  293. 				{ title: '左主机转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  294. 				{ title: '右主机转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  295. 			]
  296. 			let host3 = [
  297. 				{ title: '左增压器转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  298. 				{ title: '右增压器转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  299. 			]
  300. 			let luProps = {
  301. 				title: '31.2゜C',
  302. 				TP_max: 80,
  303. 				TP_min: 20,
  304. 				TP_value: 30,
  305. 				kdtop: 135,
  306. 				grids: {
  307. 					xgrid: "40%",
  308. 					chartGrid: -17,
  309. 					kdGrid: -7,
  310. 				}
  311. 			}
  312. 			this.hostOpt1 = pieSpeed(host1)
  313. 			this.hostOpt2 = tempBar(luProps)
  314. 			this.hostOpt22 = tempBar(luProps)
  315. 			this.hostOpt3 = pieSpeed(host3)
  316. 			let alt1 = [
  317. 				{ title: '左发电机转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  318. 				{ title: '右发电机转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  319. 			]
  320. 			let alt2 = [
  321. 				{ title: '左启动空气压力', name: 'MPa', value: 0.60, unit: '', pos: ['25%', '50%'], rangeMax: 1 },
  322. 				{ title: '右启动空气压力', name: 'MPa', value: 0.65, unit: '', pos: ['75%', '50%'], rangeMax: 1 },
  323. 			]
  324. 			this.altOpt1 = pieSpeed(alt1)
  325. 			this.altOpt2 = tempBar(luProps)
  326. 			this.altOpt22 = tempBar(luProps)
  327. 			this.altOpt3 = pieSpeed(alt2)
  328. 			let rud1 = [
  329. 				{ title: '左桨角', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  330. 				{ title: '右桨角', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  331. 			]
  332. 			let rud3 = [
  333. 				{ title: '左舵桨转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  334. 				{ title: '右舵桨转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  335. 			]
  336. 			this.rudOpt1 = pieSpeed(rud1)
  337. 			this.rudOpt2 = tempBar(luProps)
  338. 			this.rudOpt22 = tempBar(luProps)
  339. 			this.rudOpt3 = pieSpeed(rud3)
  340. 			let rud4 = [
  341. 				{ title: '左舵桨中间轴转速', name: 'r/min', value: 890, unit: '', pos: ['25%', '50%'], rangeMax: 1200 },
  342. 				{ title: '右舵桨中间轴转速', name: 'r/min', value: 890, unit: '', pos: ['75%', '50%'], rangeMax: 1200 },
  343. 			]
  344. 			let rud6 = [
  345. 				{ title: '左滑油压力', name: 'r/min', value: 0.62, unit: '', pos: ['25%', '50%'], rangeMax: 1 },
  346. 				{ title: '右滑油压力', name: 'r/min', value: 0.62, unit: '', pos: ['75%', '50%'], rangeMax: 1 },
  347. 			]
  348. 			this.rudOpt4 = pieSpeed(rud1)
  349. 			this.rudOpt5 = tempBar(luProps)
  350. 			this.rudOpt55 = tempBar(luProps)
  351. 			this.rudOpt6 = pieSpeed(rud3)
  352. 		},
  353. 	},
  354. 	mounted() {
  355. 		this.shipGuid = store.state.shipGuids
  356. 		this.shipList = store.state.shipLists
  357. 	},
  358. 	watch: {
  359. 		// swiper与上面选项卡联动
  360. 		isActive(newval) {
  361. 			// this.currentIndex = newval;
  362. 			switch (newval) {
  363. 				case 0:
  364. 					this.currentIndex = 0
  365. 					break;
  366. 				case 1:
  367. 					this.currentIndex = 0
  368. 					break;
  369. 				case 2:
  370. 					this.currentIndex = 1
  371. 					break;
  372. 				case 3:
  373. 					this.currentIndex = 2
  374. 					break;
  375. 				case 4:
  376. 					this.currentIndex = 2
  377. 					break;
  378. 				default:
  379. 					this.currentIndex = 0
  380. 					break;
  381. 			}
  382. 		},
  383. 	},
  384. }
  385. </script>
  386. <style lang="scss" scoped>
  387. page {
  388. 	height: 100%;
  389. 	display: flex;
  390. 	background-color: #FFFFFF;
  391. }
  392.  
  393. .content {
  394. 	width: 100%;
  395. 	// height: calc(100vh - 50px);
  396. 	flex: 1;
  397. 	// background-image: url("@/static/head_bg.png");
  398. 	// background-size: 100% 388rpx;
  399. 	// background-repeat: no-repeat;
  400. 	display: flex;
  401. 	flex-direction: column;
  402.  
  403. 	.head {
  404. 		width: 100%;
  405. 		height: 230rpx;
  406. 		// height: 21%;
  407. 		padding: 0 40rpx 0;
  408. 		color: #FFFFFF;
  409. 		box-sizing: border-box;
  410. 		background-image: url("@/static/head_bg.png");
  411. 		background-size: 100% 388rpx;
  412. 		background-repeat: no-repeat;
  413.  
  414. 		.my_information {
  415. 			width: 100%;
  416. 			height: 230rpx;
  417. 			font-size: 36rpx;
  418. 			text-align: center;
  419. 			padding-top: 50rpx;
  420. 			left: 0;
  421. 			background: none;
  422. 			z-index: 200;
  423.  
  424. 			.name {
  425. 				width: 100%;
  426. 				display: flex;
  427. 				justify-content: space-between;
  428. 				align-items: center;
  429.  
  430. 				.ship_change {
  431. 					width: 200rpx;
  432.  
  433. 					/deep/.uni-select {
  434. 						border: none;
  435.  
  436. 						.uni-select__input-placeholder {
  437. 							color: #fff;
  438.  
  439. 						}
  440.  
  441. 						.uni-icons::before {
  442. 							// display: none;
  443. 							color: #fff;
  444. 						}
  445.  
  446. 						.uni-select__selector-item {
  447. 							color: #000;
  448. 						}
  449.  
  450. 						.uni-select__input-text {
  451. 							color: #fff;
  452. 						}
  453.  
  454. 						.uni-select__selector {
  455. 							z-index: 1000;
  456. 						}
  457. 					}
  458. 				}
  459.  
  460. 				.toBack {
  461. 					width: 200rpx;
  462.  
  463. 				}
  464. 			}
  465.  
  466. 			.scroll-view_H {
  467. 				white-space: nowrap;
  468. 				width: 100%;
  469. 			}
  470.  
  471. 			.modules_titles {
  472. 				display: flex;
  473. 				justify-content: space-between;
  474. 				margin-top: 30rpx;
  475. 				font-weight: 500;
  476. 				font-size: 28rpx;
  477.  
  478. 				.lists {
  479. 					width: 172rpx;
  480. 					height: 60rpx;
  481. 					line-height: 60rpx;
  482. 					text-align: center;
  483. 				}
  484.  
  485. 				.module_active {
  486. 					background: #FFFFFF;
  487. 					border-radius: 98rpx;
  488. 					color: #0C274F;
  489. 				}
  490. 			}
  491. 		}
  492.  
  493. 		
  494. 	}
  495.  
  496. 	.modules_content {
  497. 		width: 100%;
  498. 		flex: 1;
  499.  
  500. 		.modules_components {
  501. 			height: 100%;
  502. 			background: #FFFFFF;
  503. 			min-height: 1000rpx;
  504. 			padding: 38rpx 20rpx 0rpx;
  505. 			box-sizing: border-box;
  506. 		}
  507.  
  508. 		.swiperitem-content {
  509. 			background-color: #ffffff;
  510.  
  511. 			.nav_item {
  512. 				background-color: #FFFFFF;
  513. 				padding: 20rpx 40rpx 0rpx 40rpx;
  514. 				height: 100%;
  515. 				display: flex;
  516. 				flex-direction: column;
  517. 				justify-content: space-around;
  518. 				align-items: center;
  519. 			}
  520. 		}
  521. 	}
  522. }
  523. </style>

写在最后，实现思路总结：

uni组件库没有tabs选项卡组件，只有自己封装，实现的思路：
考虑分为上下两块，上部是类型切换绑定点击事件，下部之前用动态组件，下部改为swiper组件，并绑定change事件。
swiper组件的属性current绑定第几个swiper-item子项，并且watch监听绑定值，对这个绑定值处理和上部的类型对应上(也可不处理)。

不处理的情况是：一个swiper-item对应一个tabs上部的类型选项。 

 

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

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

  

闽ICP备14008679号