h5点击按钮之后按钮消失_滚动视图区域 scroll-view 点击后按钮样式

官方文档：scroll-view | 微信开放文档

例子：

效果：这是一个组件，数据由父组件的title传入，可以实现左右拖动，点击也可以切换不同区域。

<template name="activityListHeader">
<view>
<view class="tabs">
<scroll-view scroll-x class="scroll-h">
<block v-for="(activityType, index) in activityTypes" :key="index">
<view
class="uni-tab-item"
:class="{ 'uni-tab-item-title-active': tabIndex == activityType.id }"
@tap="tabtap(activityType.id)"
>
{{ activityType.title }}
</view>
</block>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'activityListHeader',
props: {
activityTypes: {
type: Array,
default: []
}
},
data: function () {
return {
tabIndex: 'all'
}
},
methods: {
tabtap(id) {
this.tabIndex = id
this.$emit('change', id)
}
}
}
</script>
<style>
.tabs {
flex: 1;
flex-direction: column;
overflow: hidden;
background-color: #ffffff;
height: 70rpx;
width: 750rpx;
}
.scroll-h {
flex-direction: row;
white-space: nowrap;
}
/* 模块之间点击之前的样式 */
.uni-tab-item {
display: inline-block;
flex-wrap: nowrap;
border-radius: 16rpx;
border: 1rpx solid #dbdcdd;
padding-left: 10rpx;
padding-right: 10rpx;
margin-left: 20rpx;
padding: 16rpx 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #444444;
}
/* 点击之后的样式 */
.uni-tab-item-title-active {
background: #0097a4;
border-radius: 16rpx;
flex-wrap: nowrap;
white-space: nowrap;
padding: 16rpx 20rpx;
color: #ffffff;
font-size: 24rpx;
}
</style>

实现点击切换样式：

1、设置点击之前的样式，点击之后的样式

2、<view
class="kb-header-item"
:class="{ 'kb-header-item-title-active': tabIndex == activityType.id }"
@tap="tabtap(activityType.id)"
>

methods: {
tabtap(id) {
this.tabIndex = id
}
}

引入一个变量tabIndex，设置点击事件（将点击的id保存给tabIndex ，翻译：点击的id设置样式，因为循环v-for会产生很多id，只有点击的id才设置样式），每点击一次就将当前id传给变量tabIndex

绑定class，通过判断点击产生的id tabIndex与循环产生的所有id判断是否相等，循环产生的id和点击产生的id参数（tabIndex）相等的设置样式 来实现按钮上加不加点击之后的样式