uni-app中scroll-into-view的使用
uni-app中scroll-into-view的使用
在使用的時候需要注意:
需要給sroll-view組件設(shè)置寬或者高(根據(jù)橫縱情況)
white-space:nowrap 這行代碼讓組件能夠滑動(之前自己寫的時候踩的坑)
使用scroll-into-view,需要開啟動畫效果,并且動態(tài)綁定的值必須是字符串
并且子組件的上綁定一個id值用于定位
文章來源：http://www.zghlxwxcb.cn/news/detail-504562.html
<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>
總結(jié)
以上就是今天要講的內(nèi)容，希望對大家有所幫助?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-504562.html
到了這里，關(guān)于【uni-app】uni-app中scroll-into-view的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
