华为快应用遇到的坑(uniapp开发)

我这边是使用uniapp开发的华为快应用,我想实现的效果就是收藏功能,点击白色收藏,收藏变成红色,点击红色收藏变成白色收藏

<template>
    <cover-view @click="collect">
	    <cover-image v-if="is_collect" src="./select_collect.png"></cover-image>
	    <cover-image v-else src="./collect.png"></cover-image>
    </cover-view>
</template>

<script>
    export default {
		data() {
			return {
                // 收藏
				is_collect: false,
            }
        },
        methods: {
            collect() {
				this.is_collect = !this.is_collect
			},
        }
    }
</script>

然后我发现我这段在普通不过的代码实现不了,华为快应用显示的是我点击白色的收藏,闪现红色收藏再变成白色,这个给我整不会了

后面经过我的不懈努力,终于解决了

<cover-view @click="collect">
	<cover-image v-if="is_collect" src="./select_collect.png"></cover-image>
    <cover-view v-else>
	    <cover-image src="./collect.png"></cover-image>
    </cover-view>
</cover-view>

cover-image做显示与隐藏时,else层需要在cover-image外层包一个cover-view,

!!!!而且v-if层不能在外层包一个cover-view,否则效果就和闪现效果一样了

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2023-12-08 08:46:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-08 08:46:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-08 08:46:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-08 08:46:03       20 阅读

热门阅读

  1. Caddy服务器快速上手

    2023-12-08 08:46:03       37 阅读
  2. 【Angular开发】Angular:2023年最佳实践

    2023-12-08 08:46:03       35 阅读
  3. 用c#实现记事本的功能

    2023-12-08 08:46:03       31 阅读
  4. KVM迁移

    2023-12-08 08:46:03       21 阅读
  5. vue3在table里使用elementUI的form表单验证

    2023-12-08 08:46:03       40 阅读
  6. Boost:asio单io_service,多线程run

    2023-12-08 08:46:03       28 阅读
  7. C++设计模式学习之一(共计13种)

    2023-12-08 08:46:03       32 阅读
  8. LISP~~~~~

    2023-12-08 08:46:03       37 阅读
  9. Spring Kafka常用配置详解

    2023-12-08 08:46:03       33 阅读
  10. c++通过serial库进行上下位机通信

    2023-12-08 08:46:03       40 阅读