想自己做一个tab切换,但是v-show不能用。如果用v-if显然不合适,v-show再uni-app中和v-if使用方法不同吗?
- 发布:2019-07-20 18:20
- 更新:2024-11-13 16:08
- 阅读:19570
最佳回复
是 CSS 样式优先级的问题,非 H5 编译后元素上新增了一个 hidden 的属性,比如 v-show 放在了 <view id="abc">上 就会有一个 view[hidden]{display:none} 的样式,如果自己的样式重写了 display 属性 #abc{display:flex},优先级就有可能高于它,所以自己可以再加一个 #abc[hidden]{display:none} 就行了。
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
你好,我也遇到了这个问题,但和你场景不太一样,我是在一个自定义组件里,接收一个boolean参数,然后直接组件里用props的字段直接放到v-show里面,结果值改了UI不变,在H5里是可以消失的,但APP真机不行,我的解决方法是在组件里的data里再弄一个属性,然后赋值到这里面,然后v-show里面使用直接data里面的赋值字段,而不是props的,这样APP就可以响应变化了。
cookRice - 前端bug工程师
v-show在微信小程序中也有问题; H5表现正常, 微信小程序v-show失效; 我的解决方案是根据条件编译不同的指令来解决;
这个问题的原因我没有明白, 楼主搞明白为什么会出现这种问题的原因了吗
正确总结:
• 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
}
coderH
挖坟要坐牢
2024-09-06 09:08