【uni-app】uni-app中scroll-into-view的使用

uni-app中scroll-into-view的使用

---

---

uni-app中scroll-into-view的使用

在使用的时候需要注意:

需要给sroll-view组件设置宽或者高(根据横纵情况)

white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑)

使用scroll-into-view,需要开启动画效果,并且动态绑定的值必须是字符串

并且子组件的上绑定一个id值用于定位

<template>
	<view class="scroll-wrapper">
		<scroll-view 
		scroll-x="true" 
		class="scroll" 
		enable-flex='true' 
		scroll-with-animation  
		:scroll-into-view="'tab'+ tabId">
		
			<view :id="'tab'+index" :class="active == index ? 'active' :''"  
			v-for="(item,index) in navList" 
			:key="index" 
			@click="selectActive(index)">{
    {
    item}}</view>
			
		</scroll-view>
	</view>
</template>

<script>
  export default {
    
		data() {
    
			return {
    
				active:0,
				tabId:0
			}
		},
    methods:{
    
      selectActive(index){
    
				this.active = index
				this.tabId = index
			}
    }
  } 
</script>

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！