uniapp实现自定义滚动条。
笔记重点:需要给每个text绑定一个id,但是id不能是数字开头,所以在前面加一个s或者其他字母。然后scroll-into-view定位到“sscurrent”,当sscurrent=ssindex,scroll会自动定位过去
<template>
<view>
<scroll-view :scroll-into-view="'ss'+current" scroll-x="true" style="background-color: #007AFF;padding-top: 20px;">
<view class="tabs">
<text :id="'ss'+index" @click="chooseTab(index)" :class="{cur:current==index}" v-for="(item,index) in tabs" :key="index">{{item}}</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tabs:['百姓商城','网易新闻','穿搭推荐','待定','待定','待定','待定'],
current:0
}
},
methods: {
chooseTab(index){
console.log(index)
this.current=index
}
}
}
</script>
<style lang="scss">
.tabs{
display: flex;
text{
padding: 10px;
white-space: nowrap;
color: white;
}
.cur{
color: orange;
border-bottom: 2px solid orange;
font-weight: bold;
}
}
</style>