想要达到的目标:
点击按钮后,该按钮class 样式变成 series-button-hover
,
比如第一个按钮 sourceIndex = 0
seriesIndex=1
那么当我给 active
赋值 'button-class-0-1'
时,被点击的按钮背景色会变化。
实际情况:
H5中可以达到预期效果,无任何报错。
APP中点击后背景颜色 没变化
请高手帮忙看看问题出在哪?下面是我的代码:
<template>
<!-- 源标题 -->
<view class="play-source-title">
<view type="default" size="mini" class="play-source-button"
v-for="playSourceList, sourceIndex in videoDetail.video_play_list"
>{{playSourceList.play_list_title}}
<!-- 当前源的剧集列表 -->
<view class="play-series-list">
<button
type="default" size="mini"
:class="(active == ''+sourceIndex+'-'+seriesIndex)?'series-button-hover':'play-source-button'"
v-for="playSeriesList, seriesIndex in playSourceList.play_list_info"
:data-sourceIndex="sourceIndex"
:data-seriesIndex="seriesIndex"
@click="playThis"
hover-class="series-button-hover"
>{{playSeriesList.play_link_title}}</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
videoPlayUrl: "",
videoDetail: [],
active: "no",
}
},
onLoad(params) {
},
methods: {
playThis(e) {
var sourceIndex = e.currentTarget.dataset.sourceindex;
var seriesIndex = e.currentTarget.dataset.seriesindex;
this.active = ''+sourceIndex+'-'+seriesIndex;
}
}
}
</script>
<style>
.play-source-button,.series-button-hover {
margin: 0upx 10upx 5upx 10upx;
}
.series-button-hover {
background-color: #F0AD4E;
}
</style>
加班大师 (作者)
啊?请问哪里不全了?是 videoDetail 的结构吗?它是这样的:
videoDetail: {
video_play_list:{
play_list_title:"list_title_1",
play_list_info:{
play_link_title:"play_link_title_1"
}
},
video_play_list:{
play_list_title:"list_title_2",
play_list_info:{
play_link_title:"play_link_title_2"
}
}
},
2022-01-24 09:58
y***@youjiuzs.com
回复 加班大师: :class='{ }',用大括号包起来试试
2022-01-24 10:32
加班大师 (作者)
回复 y***@youjiuzs.com: 谢谢指点,我试了用
{}
会报错。错误提示我放下面回复里,这里放代码不好看。2022-01-24 10:37
加班大师 (作者)
回复 y***@youjiuzs.com:
然后我还用中括号
[]
试了,没报错,但也是H5有效,APP无效。2022-01-24 10:37