uni-app和小程序中的scroll-view中的属性scroll-into-view的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app和小程序中的scroll-view中的属性scroll-into-view的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

案例

介绍

首先可以访问官方文档的简单介绍：scroll-view | uni-app官网

uniapp scroll-into-view,前端,uni-app

理解就是使用id绑定要跳转的所有子元素，再通过scroll-into-view实现跳转到某一个子元素（只能动态绑定）

案例

下面演示一个案例

<template>
	<view>
		<view class="box">
		<view class="btn">
			<block v-for="(item,index) in arry" :key="index">
				<button :class="leftIndex===index?'selected':''" @tap="scroll(index)">{{item}}</button>
			</block>
		</view>
		<scroll-view class="con" scroll-y="true" :scroll-into-view="rightIndex" scroll-with-animation>
			<view class="text" v-for="(item,index) in list" :key="index" :id="`right${index}`">
				{{item}}
			</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arry:['按钮1','按钮2','按钮3','按钮4','按钮5'],
				list:['内容1','内容2','内容3','内容4','内容5'],
				rightIndex: `right${0}`,
				leftIndex:0
			}
		},
		methods: {
			scroll(index){
				this.rightIndex=`right${index}`,
				this.leftIndex=index
			}
		}
	}
</script>

得到的结果图是：

uniapp scroll-into-view,前端,uni-app

主要主要代码：

<scroll-view class="con" scroll-y="true" :scroll-into-view="rightIndex" scroll-with-animation>
           <view class="text" v-for="(item,index) in list" :key="index" :id="`right${index}`">
               {{item}}
           </view>
       </scroll-view>

重点在于通过 right${index}实现绑定，再通过:scroll-into-view="rightIndex"抛下指定锚点，

通过点击左边的按钮传入index值，动态改变rightIndex: `right${0}`的值实现跳转文章来源地址https://www.toymoban.com/news/detail-526875.html

到了这里，关于uni-app和小程序中的scroll-view中的属性scroll-into-view的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！