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

uniapp锚点定位 、自动吸顶、滚动自动选择对应的锚点_使用u-tabs实现滚动,点击跳转到顶部

作者：笔触狂放9 | 2024-04-15 18:10:11

赞

踩

使用u-tabs实现滚动,点击跳转到顶部

 vue3+uniapp+uview 

vue3 uview框架：https://vkuviewdoc.fsq.pub/components/picker.html

 

  1. <template>
  2. 	<view class="main">
  3. 		<view class="mt25 all-menu box-shadow border-radius5">
  4. 			<text class="title mb10">全部菜单</text>
  5.  
  6. 			<view class="x-p-titleList">
  7. 				<u-sticky>
  8. 					<!-- 只能有一个根元素 -->
  9. 					<view class="sticky">
  10. 						<u-tabs :list="dataList" :is-scroll="true" v-model="current" @change="change">
  11. 						</u-tabs>
  12. 					</view>
  13. 				</u-sticky>
  14.  
  15. 				<scroll-view class="scroller mt5" :scroll-into-view="toView" scroll-y="true"
  16. 					scroll-with-animation="true">
  17. 					<view class="x-p-listItem" v-for="item in dataList" :key="item.id" :id="item.id">
  18. 						<u-line color="#bbbbbb" />
  19. 						<view class="mt5 mb5">{{item.name}}</view>
  20. 						<view v-for="info in item.moduleList" :key="info.moduleId"
  21. 							class="listItem-dtl u-icon-wrap u-row-between">
  22. 							<view class="u-flex">
  23. 								<image :src="info.icon"></image>
  24. 								<text>{{info.label}}</text>
  25. 							</view>
  26. 							<view>
  27. 								<u-button type="primary" class="add-btn" v-if="isAdd">添加</u-button>
  28. 								<u-button class="add-btn" v-else>已添加</u-button>
  29. 							</view>
  30. 						</view>
  31. 					</view>
  32. 				</scroll-view>
  33. 			</view>
  34. 		</view>
  35.  
  36.  
  37. 	</view>
  38. </template>
  39. <script lang="ts">
  40. 	import {
  41. 		ref,
  42. 		reactive,
  43. 		onMounted,
  44. 	} from 'vue'
  45. 	export default {
  46. 		setup() {
  47. 			const keyword = ref('')
  48. 			// ----------------------------------------
  49. 			const current = ref(0)
  50. 			const dataList = reactive([{
  51. 				id: 'item1',
  52. 				name: '办公OA',
  53. 				moduleList: [{
  54. 						moduleId: '5001',
  55. 						label: '出差申请',
  56. 						icon: '../../static/logo.png'
  57. 					},
  58. 					{
  59. 						moduleId: '5002',
  60. 						label: '加班申请',
  61. 						icon: '../../static/images/nav_car_apply.png'
  62. 					},
  63. 					{
  64. 						moduleId: '5003',
  65. 						label: '请假申请',
  66. 						icon: '../../static/images/nav_car_apply.png'
  67. 					},
  68. 					{
  69. 						moduleId: '5004',
  70. 						label: '办公用品申请',
  71. 						icon: '../../static/images/nav_car_apply.png'
  72. 					}
  73. 				]
  74. 			}, {
  75. 				id: 'item2',
  76. 				name: '生产管理',
  77. 				moduleList: [{
  78. 						moduleId: '6001',
  79. 						label: '生产',
  80. 						icon: '../../static/logo.png'
  81. 					},
  82. 					{
  83. 						moduleId: '6002',
  84. 						label: '领料',
  85. 						icon: '../../static/images/nav_car_apply.png'
  86. 					},
  87. 					{
  88. 						moduleId: '6003',
  89. 						label: '销售出库',
  90. 						icon: '../../static/images/nav_car_apply.png'
  91. 					},
  92. 					{
  93. 						moduleId: '6004',
  94. 						label: '销售入库',
  95. 						icon: '../../static/images/nav_car_apply.png'
  96. 					},
  97. 					{
  98. 						moduleId: '6004',
  99. 						label: '销售入库',
  100. 						icon: '../../static/images/nav_car_apply.png'
  101. 					}
  102. 				]
  103. 			}, {
  104. 				id: 'item3',
  105. 				name: '进销存管理',
  106. 				moduleList: [{
  107. 						moduleId: '5001',
  108. 						label: '出差申请',
  109. 						icon: '../../static/logo.png'
  110. 					},
  111. 					{
  112. 						moduleId: '5002',
  113. 						label: '加班申请',
  114. 						icon: '../../static/images/nav_car_apply.png'
  115. 					},
  116. 					{
  117. 						moduleId: '5003',
  118. 						label: '请假申请',
  119. 						icon: '../../static/images/nav_car_apply.png'
  120. 					},
  121. 					{
  122. 						moduleId: '5004',
  123. 						label: '办公用品申请',
  124. 						icon: '../../static/images/nav_car_apply.png'
  125. 					}
  126. 				]
  127. 			}, {
  128. 				id: 'item4',
  129. 				name: '供应商管理',
  130. 				moduleList: [{
  131. 						moduleId: '6001',
  132. 						label: '生产',
  133. 						icon: '../../static/logo.png'
  134. 					},
  135. 					{
  136. 						moduleId: '6002',
  137. 						label: '领料',
  138. 						icon: '../../static/images/nav_car_apply.png'
  139. 					},
  140. 					{
  141. 						moduleId: '6003',
  142. 						label: '销售出库',
  143. 						icon: '../../static/images/nav_car_apply.png'
  144. 					},
  145. 					{
  146. 						moduleId: '6004',
  147. 						label: '销售入库',
  148. 						icon: '../../static/images/nav_car_apply.png'
  149. 					},
  150. 					{
  151. 						moduleId: '6004',
  152. 						label: '销售入库',
  153. 						icon: '../../static/images/nav_car_apply.png'
  154. 					}
  155. 				]
  156. 			}, {
  157. 				id: 'item5',
  158. 				name: '实验室管理',
  159. 				moduleList: [{
  160. 						moduleId: '6001',
  161. 						label: '生产',
  162. 						icon: '../../static/logo.png'
  163. 					},
  164. 					{
  165. 						moduleId: '6002',
  166. 						label: '领料',
  167. 						icon: '../../static/images/nav_car_apply.png'
  168. 					},
  169. 					{
  170. 						moduleId: '6003',
  171. 						label: '销售出库',
  172. 						icon: '../../static/images/nav_car_apply.png'
  173. 					},
  174. 					{
  175. 						moduleId: '6004',
  176. 						label: '销售入库',
  177. 						icon: '../../static/images/nav_car_apply.png'
  178. 					},
  179. 					{
  180. 						moduleId: '6004',
  181. 						label: '销售入库',
  182. 						icon: '../../static/images/nav_car_apply.png'
  183. 					}
  184. 				]
  185. 			}, {
  186. 				id: 'item6',
  187. 				name: '生产管理',
  188. 				moduleList: [{
  189. 						moduleId: '6001',
  190. 						label: '生产',
  191. 						icon: '../../static/logo.png'
  192. 					},
  193. 					{
  194. 						moduleId: '6002',
  195. 						label: '领料',
  196. 						icon: '../../static/images/nav_car_apply.png'
  197. 					},
  198. 					{
  199. 						moduleId: '6003',
  200. 						label: '销售出库',
  201. 						icon: '../../static/images/nav_car_apply.png'
  202. 					},
  203. 					{
  204. 						moduleId: '6004',
  205. 						label: '销售入库',
  206. 						icon: '../../static/images/nav_car_apply.png'
  207. 					},
  208. 					{
  209. 						moduleId: '6004',
  210. 						label: '销售入库',
  211. 						icon: '../../static/images/nav_car_apply.png'
  212. 					}
  213. 				]
  214.  
  215. 			}])
  216. 			let toView = ref('')
  217. 			// 锚点
  218. 			function change(index) {
  219. 				// var id = event.currentTarget.dataset.id;
  220. 				var id = 'item' + (index + 1)
  221. 				toView = id;
  222. 				uni.createSelectorQuery().select('#' + toView).boundingClientRect(data => { //目标位置的节点：类或者id
  223. 					uni.createSelectorQuery().select(".x-p-titleList").boundingClientRect(
  224. 						res => { //最外层盒子的节点：类或者id
  225. 							uni.pageScrollTo({
  226. 								duration: 100, //过渡时间
  227. 								// scrollTop: data.top - res.top - 10 //到达距离顶部的top值
  228. 								scrollTop: data.top - res.top + 45 //到达距离顶部的top值
  229. 							})
  230. 						}).exec()
  231. 				}).exec();
  232. 			}
  233. 			let isAdd = ref(true)
  234. 			// --------------------------------------
  235. 			let distanceArr = reactive([]) // 每一个ID对应的scrollTop值
  236. 			// 获取所有元素在当前页面所处的位置信息
  237.  
  238.  
  239. 			function getDistanceArr() {
  240. 				dataList.map(el => {
  241. 					uni.createSelectorQuery().select('#' + el.id).boundingClientRect(data => { //目标位置的节点：类或者id
  242. 						// 获取当前ID距离顶部的top值
  243. 						distanceArr.push(data.top)
  244. 					}).exec();
  245. 				})
  246. 			}
  247. 			// 生命周期
  248. 			onMounted(() => {
  249. 				getDistanceArr()
  250. 			})
  251.  
  252.  
  253. 			return {
  254. 				keyword,
  255. 				current,
  256. 				dataList,
  257. 				toView,
  258.  
  259. 				change,
  260. 				isAdd,
  261. 				distanceArr,
  262. 				getDistanceArr
  263. 			}
  264. 		},
  265. 		// onShow() {
  266. 		// 	this.getDistanceArr()
  267. 		// },
  268. 		// 监听页面滚动
  269. 		onPageScroll(event) {
  270. 			const _this = this
  271. 			if (this.isTabChange) {
  272. 				return
  273. 			}
  274. 			const {
  275. 				scrollTop
  276. 			} = event;
  277. 			const skewY =100 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
  278. 			if (scrollTop >= skewY) {
  279. 				if (!this.showTabs && this.current <= 0) { // 在未显示tab并且 current <= 0时，防止uview ui抖动bug，设置默认复位值
  280. 					this.current = 0
  281. 				}
  282. 				this.showTabs = true
  283. 				this.$nextTick(() => {
  284. 					const length = this.distanceArr.length
  285. 					const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > 0)
  286. 					// 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
  287. 					// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
  288. 					// this.current = index > 0 ? index - 1 : length - 1
  289. 					this.current = index > 0 ? index - 1 : 0
  290. 				})
  291. 			}
  292. 			//  else {
  293. 			// 	this.showTabs = false
  294. 			// }
  295. 		}
  296. 	}
  297. </script>
  298.  
  299. <style lang="scss">
  300. 	.main {
  301. 		padding: 20rpx;
  302. 	}
  303.  
  304. 	.all-menu {
  305. 		padding: 10rpx;
  306.  
  307. 		.title {
  308. 			font-size: 16px;
  309. 			// font-weight: bold;
  310. 		}
  311. 	}
  312.  
  313. 	// --------------------
  314.  
  315. 	.list-cell {
  316. 		display: flex;
  317. 		box-sizing: border-box;
  318. 		width: 100%;
  319. 		padding: 10px 24rpx;
  320. 		color: #323233;
  321. 		font-size: 14px;
  322. 		line-height: 24px;
  323. 		background-color: #fff;
  324. 	}
  325.  
  326. 	.listItem-dtl {
  327. 		height: 100rpx;
  328.  
  329.  
  330. 		image {
  331. 			height: 80rpx;
  332. 			width: 80rpx;
  333. 			margin-right: 16rpx;
  334. 		}
  335. 	}
  336.  
  337. 	.search {
  338. 		position: fixed;
  339. 	}
  340.  
  341. 	.scroller {
  342. 		box-sizing: border-box;
  343. 		padding: 0 15rpx;
  344. 	}
  345. </style>

调用接口使用过程中的问题及解决

1.使用vue3赋值问题：

let dataList=reactive([])改成let obj=reactive({dataList:[]})

html部分修改：obj.dataList

  1.  
  2. <u-tabs :list="obj.dataList" :is-scroll="true" v-model="current" @change="change">
  3. 						</u-tabs>
  4.  
  5.  
  6. <view class="x-p-listItem" v-for="(item,idxBlock) in obj.dataList" :key="item.menuId"
  7. 						:id="'item'+idxBlock">

2.js

  1.  
  2. 	import {
  3. 		ref,
  4. 		reactive,
  5. 		onMounted,
  6. 		nextTick
  7. 	} from 'vue'
  8.  
  9. export default {
  10. 		setup() {
  11.  
  12. let obj = reactive({
  13. 				dataList: []
  14. 			})
  15.  
  16.  
  17. 			// 获取全部菜单列表
  18. 			function getAllMenuList() {
  19. 				listMenu(queryParams).then(res => {
  20. 					let data = res.data.data.map(s => {
  21. 						s.visible = false
  22. 						return s
  23. 					})
  24. 					let arr = handleTree(data, 'menuId')
  25. 					let newArr = []
  26. 					arr.forEach(item => {
  27. 						item.name = item.menuName
  28. 						item.id = item.menuId
  29. 						if (item.menuType != 'C') {
  30. 							newArr.push(item)
  31. 						}
  32. 					})
  33. 					obj.dataList = newArr
  34. 					
  35. 					// 记录每个模块节点位置,请求到数据挂在完成后执行，去掉原来的getDistanceArr方法
  36. 					nextTick(() => {
  37. 						obj.dataList.map((el, index) => {
  38. 							uni.createSelectorQuery().select('#item' + index).boundingClientRect(
  39. 								data => { //目标位置的节点：类或者id
  40. 									// 获取当前ID距离顶部的top值
  41. 									distanceArr.push(data.top)
  42. 								}).exec();
  43. 						})
  44. 					})
  45.  
  46. 				})
  47. 			}
  48.  
  49.  
  50. 			// 生命周期
  51. 			onMounted(() => {
  52. 				getAllMenuList()
  53. 				// getDistanceArr()
  54. 			})
  55.  
  56.  
  57. 			return {
  58. 				keyword,
  59. 				current,
  60. 				obj,
  61. 				toView,
  62.  
  63. 				change,
  64. 				isAdd,
  65. 				distanceArr,
  66. 				addOrCancelMenu,
  67. 			}
  68. 		},

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

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

  

闽ICP备14008679号