<template>
<view>
<view class="scrBox">
<scroll-view class="menu-list" :scroll-into-view="goIndex" scroll-x="true">
<view v-for="(item,k) in timeList" :key="k" :id='"id" + k' @tap="sel(k,item)" class="ListBox">
<view class="rush" :class="{'curBac':item.id==curId}">{{item.name}}</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
curId:0,
goIndex:"",
timeList:[
{
name:"陈浩南",
id:0
},
{
name:"山鸡",
id:1
},
{
name:"包达二",
id:2
},
{
name:"包达明",
id:3
},
{
name:"梁二",
id:4
},
{
name:"柯志华",
id:5
},
{
name:"苏阿细",
id:6
},
{
name:"十三妹",
id:7
},
{
name:"丁瑶",
id:8
},
{
name:"kk",
id:9
},
{
name:"林淑芬",
id:10
},
{
name:"靓坤",
id:11
}
]
}
},
methods:{
sel(index,item){
this.goIndex = "id" + index
this.curId = item.id
}
}
}
</script>
<style lang="scss">
.scrBox{
width: 100%;
height: 120rpx;
white-space: nowrap;
.menu-list {
.ListBox {
display: inline-block;
font-size: 24rpx;
color: #333;
text-align: center;
width: 115rpx;
}
.rush{
font-size: 21rpx;
color: #999;
margin: 0 auto;
}
.curBac{
width: 88rpx;
line-height: 30rpx;
background: #00AFFF;
border-radius: 15rpx;
color: #fff;
}
}
}
</style>
Tips:
- scroll-view的外层view需要white-space: nowrap使得内部组件不换行
- scroll-view的内层view需要display: inline-block使得内部组件横向排列
- scroll-into-view值应为某子元素id(id不能以数字开头)