<template>
<view>
<!--顶部轨迹-->
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
<view class="topbox">
<view class="locusnum" :class="{'selectlocusnum': rSelect.indexOf(index)!=-1}"
v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">
{
{value.name}}
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
infoArr: [{
name: "全天轨迹"
}, {
name: "轨迹1"
}, {
name: "轨迹2"
}, {
name: "轨迹3"
}, {
name: "轨迹4"
}, {
name: "轨迹5"
}, {
name: "轨迹6"
}, {
name: "轨迹7"
}, {
name: "轨迹8"
}],
rSelect: []
};
},
methods: {
//可多选
tapInfo(e) {
// console.log('数组indexOf-----', this.rSelect)
if (this.rSelect.indexOf(e) == -1) {
// console.log('打印下标====', e)
this.rSelect.push(e); //选中添加到数组里
} else {
this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
}
}
},
};
</script>
<style lang="scss">
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.topbox {
display: flex;
align-items: center;
}
.locusnum {
padding: 14rpx 30rpx;
margin: 10rpx 10rpx;
text-align: center;
font-size: 28rpx;
color: #9b9b9b;
border-radius: 10rpx;
background-color: #f7f7f7;
}
.selectlocusnum {
padding: 14rpx 30rpx;
margin: 10rpx 10rpx;
text-align: center;
font-size: 28rpx;
color: white;
border-radius: 10rpx;
background-color: black;
}
</style>
可多选状态:
单选状态:
methods: {
tapInfo(e) {
if (this.rSelect.indexOf(e) == -1) {
this.rSelect.splice(0, this.rSelect.length); //清空 每次点击都会先清空再添加一个,这样永远都是一个,就变成了单选
this.rSelect.push(e);
} else {
this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
}
}
},
只能选中一个