<template>
<view>
<view>
<scroll-view class="menu" :scroll-into-view="goIndex" scroll-x="true">
<view class="menu-view">
<view v-for="(item,index) in list" :id='"id" + index' @tap="scrollTurn(index,item.id)" class="menu-item" :class="item.id==selectId?'active':''">
<view class="name">{{item.name}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selectId: 0,
goIndex: "",
list: [{
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: "酷酷酷",
id: 9
},
{
name: "啦啦啦",
id: 10
},
{
name: "喵喵喵",
id: 11
},
{
name: "你你你",
id: 12
}
]
}
},
methods: {
scrollTurn(index, id) {
this.goIndex = "id" + index;
this.selectId = id;
}
}
}
</script>
<style>
.menu {
width: 100%;
height: 50rpx;
display: flex;
}
.menu-view {
display: flex;
flex-wrap: nowrap;
}
.menu-item {
font-size: 24rpx;
margin-left: 60rpx;
}
.menu-item .name {
width: 100rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
}
.active {
background-color: #1779FE;
color: #fff;
border-radius: 10rpx;
}
</style>
scroll-into-view值应为某子元素id(id不能以数字开头)会报错t.group is not a function