加班大师
加班大师
  • 发布:2022-01-24 00:02
  • 更新:2024-11-05 16:24
  • 阅读:2332

uniapp动态设置class,在H5中可以生效,在APP中无效 怎么办?

分类:uni-app

想要达到的目标:
点击按钮后,该按钮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>
2022-01-24 00:02 负责人:无 分享
已邀请:
suncere

suncere

代码提供不全

  • 加班大师 (作者)

    啊?请问哪里不全了?是 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:


    Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):  
    10:35:10.812 (Emitted value instead of an instance of Error)
    10:35:10.813 Errors compiling template:
    10:35:10.823 invalid expression: Unexpected token '(' in
    10:35:10.824 {(active == 'button-'+sourceIndex+'-'+seriesIndex)?'series-button-hover':'play-source-button'}
    10:35:10.840 Raw expression: :class="{(active == 'button-'+sourceIndex+'-'+seriesIndex)?'series-button-hover':'play-source-button'}"

    然后我还用中括号[] 试了,没报错,但也是H5有效,APP无效。

    2022-01-24 10:37

加班大师

加班大师 (作者) - 只是新手,学得好累。

求大神帮助啊。

加班大师

加班大师 (作者) - 只是新手,学得好累。

我已经自己解决了!
唉,一个能打的都没有?
以后谁也遇到同样的问题,请联系我。

  • c***@yahoo.com

    你好。请问是怎么做到的

    2022-10-13 11:09

  • 菜鸡前端

    哥,这个问题怎么解决的

    2024-06-03 14:42

1***@163.com

1***@163.com

请问怎么解决呀?

HRK

HRK - 一位热爱uniapp的小少年^v^

可能是:class里面的逻辑太复杂了?你用一个方法来代替试试?

<button :class="getClass"></button>  
methods{  
  getClass(){  
    判断逻辑  
  }  
}  
z***@foxmail.com

z***@foxmail.com

大佬如何解决的呀

要回复问题请先登录注册