Darly
Darly
  • 发布:2019-07-20 18:20
  • 更新:2024-11-13 16:08
  • 阅读:19570

uni-app v-show不生效,是不是有什么特别的用法?还是说不能用到自定义组件上?

分类:uni-app

想自己做一个tab切换,但是v-show不能用。如果用v-if显然不合适,v-show再uni-app中和v-if使用方法不同吗?

2019-07-20 18:20 负责人:无 分享
已邀请:

最佳回复

前端黑板报

前端黑板报

是 CSS 样式优先级的问题,非 H5 编译后元素上新增了一个 hidden 的属性,比如 v-show 放在了 <view id="abc">上 就会有一个 view[hidden]{display:none} 的样式,如果自己的样式重写了 display 属性 #abc{display:flex},优先级就有可能高于它,所以自己可以再加一个 #abc[hidden]{display:none} 就行了。

  • coderH

    挖坟要坐牢

    2024-09-06 09:08

种子的信仰

种子的信仰

v-show="false" 不生效的原因找到了,

css 权重问题

view[hidden] 权重值 10 + 1
使用全局样式
.u-flex 权重值 10

页面内写样式,
scoped 模式下 会自动生成一串css, 比如 class="indicator data-v-01011e28":
.indicator.data-v-01011e28 权重值 10 + 10 = 20
.container .indicator.data-v-01011e28 权重值 10 + 10 + 10 = 30

去掉 scoped
.indicator 权重值 10
.container .indicator 权重值 10 + 10 = 20

李博士1110

李博士1110

你好,我也遇到了这个问题,但和你场景不太一样,我是在一个自定义组件里,接收一个boolean参数,然后直接组件里用props的字段直接放到v-show里面,结果值改了UI不变,在H5里是可以消失的,但APP真机不行,我的解决方法是在组件里的data里再弄一个属性,然后赋值到这里面,然后v-show里面使用直接data里面的赋值字段,而不是props的,这样APP就可以响应变化了。

2***@qq.com

2***@qq.com - 前端开发小菜鸡

:class 切换样式

  • Darly (作者)

    你真是个机智的少年,所以v-show是不能用吗?

    2019-07-20 18:24

1***@qq.com

1***@qq.com - sdf

确实,父组件传过来的数据,不能像vue一样直接this.xxx遍历,需要在子组件的data里面定义一个属性来装父级传过来的数据,这样点击事件才会生效的

Yacheck

Yacheck

v-show 只适用基本组件,uni-app 会将v-show 的组件添加hidden属性,而在组件中添加hidden属性,不会起作用

root_ad

root_ad

自定义组件包一层view

<view v-show="boolean">  
<xxx/>  
</view>
cookRice

cookRice - 前端bug工程师

v-show在微信小程序中也有问题; H5表现正常, 微信小程序v-show失效; 我的解决方案是根据条件编译不同的指令来解决;
这个问题的原因我没有明白, 楼主搞明白为什么会出现这种问题的原因了吗

  • m***@163.com

    你这个问题解决了吗,我也是,小程序没用

    2020-01-19 14:52

  • 1***@qq.com

    回复 m***@163.com: 现在的v-show在小程序如果是内置组件是没问题,但是自定义组件是有问题的

    2020-08-08 10:32

ConFront_C_Eng
zzdev

zzdev

如果是在小程序中,可以在 App.vue 的 style 里添加

[hidden] {  
  display: none;  
}
Zainxy

Zainxy

用v-if 替代 v-show能解决

w***@outlook.com

w***@outlook.com

正确总结:
• props 是父组件传递给子组件的,子组件只能读取,而不能直接修改它。
• 如果子组件内部修改 props 的值,watch 无法监听到这些变化,因为 watch 只能监听父组件传递的 props 的变化。
• watch 只能监听父组件对 props 的修改,而不能监听子组件内部的修改。
• 这些刷新和回到顶部都是单项绑定的,
• 比如回到顶部,初始值是0,组件内部滚动改了props的值,但是是子组件改的props的值,watch认为还是0,所以在父组件再重置为0时,watch监听不到,所以回不到顶部
刷新同样如此,必须在下拉刷新时修改刷新的值为true,不然不是父组件更改的v-bind的值,下拉刷新组件(子组件)本身修改props,watch监听不到,认为还是false,导致父组件设置v-bind为false,watch也认为是false,导致watch不触发,但是其实下拉刷新为true,watch又不改所以导致刷新加载一直持续

<scroll-view :scroll-y="true" class="list" :scroll-top="scrollTop" />  
const scrollTop = ref(0.01);//初始值设置(注意:不要设置成0,不然无效)  
const top_fn = () => {//滚动到顶部函数  
    scrollTop.value = scrollTop.value + 0.00001 //如果scrollTop.value和上一次相同无法触发scroll-view组件内的watch事件,因此在此加个0.00001  
}

要回复问题请先登录注册