[uni app] the use of scroll into view in uni app

uni-app in scroll-into-view Use

---

---

uni-app in scroll-into-view Use

You need to pay attention to :

Need to give sroll-view Set the width or height of the component ( According to the horizontal and vertical conditions )

white-space:nowrap This line of code enables the component to slide ( I stepped on the pit when I wrote it before )

Use scroll-into-view, You need to turn on the animation effect , And the value of dynamic binding must be a string

And the sub component is bound with a id Value for positioning

<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>

---

summary

That's what we're going to talk about today , I hope that's helpful ！！！