• uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】

    大佬网址：

    https://blog.csdn.net/weixin_47136265/article/details/132303570

    效果

    请添加图片描述

    代码

    <template>
	
	<view class="max">
		<view class="box">
			123
		view>
		<view class="main">
			<scroll-view scroll-y="true" class="left-content">
				<view class="left-item" :class="{ 'activeItem': tabIndex == index }" v-for="(item,index) in leftData"
					:key="item.id" @click="clickLeftItem(index)">{{item.title}}view>
			scroll-view>
			<scroll-view scroll-y="true" class="right-content" :scroll-into-view="scrollId" scroll-with-animation
				@scroll="scrollEvt">
				<view class="right-item" v-for="(item,index) in rightData" :key="item.id" :id="'item'+index">
					<view class="title">
						{{item.title}}
					view>
					<view class="content">
						<view class="content-item" v-for="itm in item.children" :key="itm.id">
							{{itm.text}}
						view>
					view>
				view>
			scroll-view>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				scrollId: '',
				distanceList: [],
				timer: null,
				isLeftClick: false,
				leftData: [{
						title: '第一个',
						id: 10001
					},
					{
						title: '第二个',
						id: 10002
					},
					{
						title: '第三个',
						id: 10003
					},
					{
						title: '第四个',
						id: 10004
					},
					{
						title: '第五个',
						id: 10005
					},
					{
						title: '第六个',
						id: 10006
					}
				],
				rightData: [{
						id: '20001',
						title: '第一部分标题',
						children: [{
								id: '30001',
								text: '第一个子项'
							},
							{
								id: '30002',
								text: '第二个子项'
							},
							{
								id: '30003',
								text: '第三个子项'
							},
							{
								id: '30004',
								text: '第四个子项'
							}
						]
					},
					{
						id: '20002',
						title: '第二部分标题',
						children: [{
								id: '30005',
								text: '第一个子项'
							},
							{
								id: '30006',
								text: '第二个子项'
							},
							{
								id: '30007',
								text: '第三个子项'
							}
						]
					},
					{
						id: '20003',
						title: '第三部分标题',
						children: [{
								id: '30008',
								text: '第一个子项'
							},
							{
								id: '30009',
								text: '第二个子项'
							},
							{
								id: '30010',
								text: '第三个子项'
							},
							{
								id: '30011',
								text: '第四个子项'
							}
						]
					},
					{
						id: '20004',
						title: '第四部分标题',
						children: [{
								id: '30012',
								text: '第一个子项'
							},
							{
								id: '30013',
								text: '第二个子项'
							}
						]
					},
					{
						id: '20005',
						title: '第五部分标题',
						children: [{
								id: '300014',
								text: '第一个子项'
							},
							{
								id: '300015',
								text: '第二个子项'
							}
						]
					},
					{
						id: '20006',
						title: '第六部分标题',
						children: [{
								id: '300016',
								text: '第一个子项'
							},
							{
								id: '300017',
								text: '第二个子项'
							},
							{
								id: '300018',
								text: '第三个子项'
							},
							{
								id: '300019',
								text: '第四个子项'
							}
						]
					}
				]
			}
		},
		mounted() {
			setTimeout(() => {
				this.getDistanceToTop();
			}, 500)
		},

		methods: {
			clickLeftItem(index) {
				this.isLeftClick = true
				this.tabIndex = index
				this.scrollId = 'item' + index
			},
			getDistanceToTop() { //获取右侧各部分距离顶部的距离
				let that = this
				let selectorQuery = uni.createSelectorQuery().in(this);

				selectorQuery.selectAll('.right-item').boundingClientRect(function(rects) {
					rects.forEach(function(rect) {
						that.distanceList.push(rect.top)
					})
					console.log('that.distanceList', that.distanceList);
				}).exec()
			},

			// 元素滚动到顶部时，对应的左侧导航栏变为选中状态
			scrollEvt(e) {
				// 点击左侧导航栏引起的滚动不做判断
				if (this.isLeftClick) {
					this.isLeftClick = false
					return
				}
				// 防抖
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					let scrollTop = e.detail.scrollTop //滚动的高度
					// 找到位于顶部元素的索引，距离大于滚动高度的第一个元素的上一个元素就是此时位于顶部的元素
					let index = this.distanceList.findIndex(it => {
						// 滚动条的位置大于元素距离顶部位置的距离时，说明元素已经滑过了顶部
						return (it > scrollTop)
					}) - 1
					if (index == this.tabIndex) return
					// this.tabIndex = index;		// 这里是个	bug

					this.tabIndex = index != -1 ? index : 0; //  修改后可以了正确了，找人花了我50大洋，五分钟解决，太厉害了！！！
				}, 200)
			}
		}
	}
script>
<style lang="less" scoped>
	.max {
		display: flex;
		flex-direction: column;
	}

	.box {
		width: 100%;
		height: 200rpx;
		border: 1rpx solid red;
	}

	.main {
		display: flex;
		justify-content: space-between;
		width: 100vw;
		// 这里控制楼层高度，防止全部滑动到页面顶部，这里设置高度，这样设置！！！
		height: calc(100vh - 300px);
		// 或者用这个var(--status-bar-height) 是app的上面状态栏高度
		//height: calc(100vh - var(--status-bar-height) - 300rpx);//重点！！！
		margin-top: 100rpx;
		border: 1rpx solid red;
		
	}

	.left-content {
		width: 250rpx;
		height: 100%;
		background-color: #E7E7E7;
	}

	.left-item {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.activeItem {
		background-color: #fff;
		color: skyblue;
	}

	.right-content {
		flex: 1;
		height: 100%;
		background-color: #f4f4f4;
	}

	.content-item {
		width: 100%;
		height: 200rpx;
		background-color: aqua;
		margin-top: 20rpx;
		overflow:auto;//重点
		height: calc(100vh - var(--status-bar-height) - 300rpx);//重点！！！
	}

	.title {
		padding: 15px 0 0 10px;
	}

	// 去掉右部分有滚动条
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294

    二

    大佬

    效果

    请添加图片描述

    代码

    <template>
	<view class="bodys">
		<view class="scroll_box" id="scroll_box">
			<scroll-view :style="{ height: scrollHeight + 'px' }" scroll-y='true' class="left_box"
				:scroll-into-view="leftIntoView">
				<view class="left_item" v-for="(item,i) in leftArray" :key='i' @click="onLeft" :data-index="i"
					:id="'left-'+i" :class="{select:i == leftIndex}">
					{{item}}
				</view>
			</scroll-view>
			<scroll-view :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto"
				scroll-y='true' class="right_box" scroll-with-animation="true">
				<slot></slot>
				<view class="right_item" v-for="(item,i) in rightArray" :key='i' :id="'item-'+i">
					<view class="rigth_title">
						{{item.title}}
					</view>
					<view class="lis" v-for="(items,j) in item.list" :key='j'>
						{{items}}
					</view>
				</view>
				<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "side-navigation",
		data() {
			return {
				leftArray: [],
				rightArray: [],
				scrollHeight: 400,
				scrollInto: "",
				leftIndex: 0,
				topArr: [],
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
			}
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
			}
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					});
				}, 200);
			});
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll_box');
					view.boundingClientRect(res => {
						console.log(res);
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			// 获取数据
			getListData() {
				new Promise((resolve, reject) => {
					uni.showLoading();
					setTimeout(() => {
						let [left, main] = [
							[],
							[]
						];

						for (let i = 0; i < 25; i++) {
							left.push(`${i + 1}类商品`);

							let list = [];
							let r = Math.floor(Math.random() * 10);
							r = r < 1 ? 3 : r;
							for (let j = 0; j < r; j++) {
								list.push(j);
							}
							main.push({
								title: `第${i + 1}类商品标题`,
								list
							});
						}

						// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
						resolve({
							left,
							main
						});
					}, 1000);
				}).then(res => {
					uni.hideLoading();
					this.leftArray = res.left;
					this.rightArray = res.main;
					// DOM 挂载后 再调用 getElementTop 获取高度的方法。
					this.$nextTick(() => {
						this.getElementTop();
					});
				});
			},
			// 获取元素顶部信息
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.right_item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					console.log(res);
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			// 点击左侧导航
			onLeft(e) {
				const index = e.currentTarget.dataset.index;
				// this.leftIndex = index
				this.scrollInto = `item-${index}`
			},
			// 右侧滑动
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 2 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = index < 0 ? 0 : index;
			},
		},

	}
</script>

<style>
	page,.bodys {
		height: 100%;
	}

	.scroll_box {
		display: flex;
		height: 100%;
	}

	.left_box {
		width: 30%;
	}

	.left_item {
		height: 80rpx;
	}

	.lis {
		height: 200rpx;
		border-radius: 10rpx;
		background: #808080;
		color: #FFFFFF;
		text-align: center;
		line-height: 200rpx;
		margin-bottom: 10rpx;
	}

	.select {
		background-color: #4CD964;
	}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195

    Vant-UI官网

    网址1

    网址2

    推荐uniapp插件市场

    uniapp插件市场搜索商品分类！！！
    好用，兼容性各个端，好用，我就用的这个插件！！！

    地址

    https://ext.dcloud.net.cn/plugin?id=13148

  • 相关阅读:
    为华生物胆固醇聚乙二醇氨基CLS-PEG-NH2的简介及应用说明
    服务器推送数据之websocket、socket.io及实现简易聊天系统
    Linux下的多线程教程
    学习笔记20--汽车运动控制
    Docker的网络模式
    ELK专栏之ES索引-04
    物联网毕业设计 - 基于Arduino单片机的便携抽湿加湿器
    【Leetcode】1823. Find the Winner of the Circular Game（配数学证明）
    神经网络——反向传播算法
    VUE父组件向子组件传递数据和方法
  • 原文地址：https://blog.csdn.net/m0_49714202/article/details/133354892