[uniapp] scroll-view 简单实现 u-tabbar效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了[uniapp] scroll-view 简单实现 u-tabbar效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

[uniapp] scroll-view 简单实现 u-tabbar效果,uni-app

方案

官方scroll-view 进行封装

配合属性 scroll-left Number/String 设置横向滚动条位置 即可

scroll-into-view 属性尝试过,方案较难实现

踩坑

1.scroll-view 横向失败

安装官网的解释
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

实际上,还需要再 v-for的子item上添加 display: inline-block;

那有人要说, 我要用display:flex怎么办?

那就在item外层再套个view, 给他设置 display: inline-block;即可

<scroll-view class="scroll-top-tab-bar-box" scroll-with-animation="true" scroll-x="true"
				enable-flex='true' :scroll-left="scrollLeft">
				<!-- 为了保scroll-top-tab-item的flex布局, 在外部套一个scroll-top-tab-item-box的inline-block布局 -->
				<view class="scroll-top-tab-item-box" v-for="(item,index) in tabs" :key="item.id">
					<view class="scroll-top-tab-item">
						<view :id="item.id" class="scroll-top-tab-item-title"
							:class="currentTag==index?'scroll-top-tab-item-title-selected':''"
							@tap="choose(index)">
							{{item.title}}
						</view>
						<image src="https://cdn.froglesson.com/static/cert/top_tab_bar_selected.png"
							v-if="index==currentTag"></image>
						<view class="scroll-top-tab-item-bottom-placeholder" v-else></view>
					</view>
				</view>
			</scroll-view>

2.点击item不滚动?

切记要配合 scroll-with-animation动画开启才有用, 这个好像官网没讲, 也是百度才知道的…

3. scrollLeft从哪里来?该方案存在bug


		data() {
			return {
				scrollLeft: 0
			}
		},
		methods: {
		
			choose(index) {

					this.idd = this.tabs[index].id
					this.getScrollLeft(index)
				
			},

			getScrollLeft(index) {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.scroll-top-tab-item').boundingClientRect(data => {
					this.scrollLeft = data[index].left - 100
				}).exec()
			},
		},
	};

4.使用 element.scrollIntoView doucument在APP和小程序都不支持 pass

uniapp实现tab切换可以滚动的效果

这里针对上面的说一下, 在判断
[uniapp] scroll-view 简单实现 u-tabbar效果,uni-app
是否是上一个的时候, 我们对element的选择还是要用目标element的下一个element,(实测用上一个element无滚动效果, 只能借助nextElementSibling)

			getScrollLeft(index) {
				// let query = uni.createSelectorQuery().in(this)
				// query.selectAll('.scroll-top-tab-item').boundingClientRect(data => {
				// 	this.scrollLeft = data[index].left - 100
				// }).exec()



				setTimeout(() => {

					// if (this.oldIndex == index) return;
					// uni.showToast({
					// 	title: index + "?"
					// })

					const activeNode = document.querySelector('.scroll-top-tab-item-title-selected')
					let element = index > this.oldIndex ?
						activeNode.nextElementSibling : activeNode.nextElementSibling
					element && element.scrollIntoView({
						behavior: "smooth",
						block: "nearest",
						inline: "center"
					})
					this.oldIndex = index
				}, 0)
			}
			```

5. 利用scroll-into-view (实测最终方案)

这个方案其实是利用了 scroll-into-view的特性
同时也结合了 第4条中的方向判断
比如:
[uniapp] scroll-view 简单实现 u-tabbar效果,uni-app

我们只要取对应的id更换siv的值即可, 这会非常容易.

但同时,会发现, 向左点击下一个或多个, 滚动都OK
但是反向点击上一个, 最终都会出现,上一个仅仅就贴在屏幕最左边, 这就导致再想点击上上一个, 就点不到

对于该问题的解决, 就需要我们通过对index于oldIndex进行比对, 判断下一次的点击的 方向

如果向左: 那就取 index对应的id 即可
如果向右: 那就去index -1 对应的id即可, 这里我采用 idnex-2 的更大范围,
当然, 需要你作好边际处理文章来源地址https://www.toymoban.com/news/detail-673816.html

			getScrollLeft(index) {
				if (index == this.oldIndex) return;
				let isRight = index > this.oldIndex ? true : false
				//if -> index 正常触发位移
				//if <- index -2 , 并对 index-2做边际判断(index在2以内的,直接按0位移), 
				this.siv = isRight ? this.tabs[index].cname : this.tabs[index >= 2 ? index - 2 : 0].cname;
				this.oldIndex = index;
			},