html+css
<template>
<div class="wrap" :style="style">
<div>
<div
v-for="(item,i) in list"
:key="i"
@click="autoScroll(item.top, item.id)"
:class="{item: item,active: item.active}"
>
{
{
item.title}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
style: '',
list: [
{
title: 'demo1',
active: true,
id: 'title-1',
},
{
title: 'demo2',
active: false,
id: 'title-2',
},
{
title: 'demo3',
active: false,
id: 'title-3',
},
],
}
},
computed: {
...mapState('merchant/register', ['demo1', 'demo2', 'demo3']),
},
<style>
.wrap {
position: fixed;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.item {
position: relative;
padding: 14px 0px 14px 24px;
min-width: 130px;
font