uniapp 微信小程序v-show 不显示

最新推荐文章于 2024-05-15 16:55:16 发布
最新推荐文章于 2024-05-15 16:55:16 发布
阅读量5.4k 收藏 2
点赞数 7
分类专栏： 前端踩坑专栏合集 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/109091261
版权
在uniapp项目中，使用v-show进行元素的显示隐藏控制，但在编译到微信小程序时，发现所有v-show控制的内容都显示出来。原因是微信小程序不支持'hidden'属性。解决方案包括将v-show替换为v-if，或者在组件上定义hidden属性并通过传入hidden的布尔值来控制显示。
摘要由CSDN通过智能技术生成

最近在做一个项目发现在uniapp组件上定义的v-show能正常显示隐藏，但是编译到微信小程序就全部隐藏的内容都显示出来了
百度完发现一个问题就是微信小程序不支持"hidden"属性,因v-show是直接控制css的属性的
第一种方法直接将v-show改为v-if
第二种方法是直接在组件上定义 hidden ,然后通过传入hidden的布尔值改变显示隐藏

嚣张农民
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序组件“隐身术”：替代hidden属性的奇幻之旅【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-18 848
虽然微信小程序与uni-app在直接使用hidden属性或v-show上有所限制，但通过属性传递和条件渲染等策略，我们依然可以实现组件的灵活隐藏与显示。在探索的路上，总有新的魔法等待我们去发现。你在实际开发中是否遇到过其他关于组件隐藏的奇遇？或者有更巧妙的方法想要分享？欢迎在评论区留下你的足迹，让我们共同编织小程序的魔法篇章。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
在uniapp中利用v-show控制当前按钮显示与隐藏，其他循环出来的按钮不会一起受影响，自己写着玩的，
qq_51435510的博客
09-21 3148
循环出来的按钮，利用v-show来显示与隐藏，
小程序中display:flex和v-show，v-show不生效,uni-app
代码是贝多芬的音符
08-18 1561
display：flex样式的优先级高于了v-show ，v-show其实就是display：none，display：flex优先级高于display：none。小程序中display:flex和v-show，v-show不生效、、:style=“判断对象?
v-show在uniapp中的使用不生效的问题
lsjweiyi的博客
04-23 6227
<template> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <uni-popup ref="popup"> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <v
uniapp中，v-show显示不生效的原因
qq_58752847的博客
11-11 1160
原文链接：https://blog.csdn.net/qiansitong/article/details/119886746。经排查原因后发现是因为display：flex样式的优先级高于了v-show中的display：none。display：flex不要放在局部样式中(比如style上添加scoped或者是用多层样式嵌套)同时使用v-show与display:flex的时候，发现v-show不能隐藏元素。出bug，转载......
uni-app小程序中v-show与display:flex一起使用时v-show不生效！
qiansitong的博客
08-24 2564
问题： 同时使用v-show与display:flex的时候，发现v-show不能隐藏元素 原因： 经排查原因后发现是因为display：flex样式的优先级高于了v-show中的display：none 解决办法： display：flex不要放在局部样式中(比如style上添加scoped或者是用多层样式嵌套) ...
微信小程序数据绑定，用三元表达式实现v-show效果
weixin_45966674的博客
06-14 3006
这样我们就实现了简单的v-show的效果 因为这也是通过display控制元素隐藏和展示 所以算实现了v-show而不是v-if。插值表达式可以作简单的三元表达式判断 也许这并不足以实现出v-if和v-show的效果，因为插值表达式内是不能写标签的。我们在生成组件或page目录时会产生一个js文件 其中的data变量就可以和页面作一个数据绑定。然后我们回到页面用插值表达式将name打印在页面上。然后我们就会发现 你好两个字被输出在了页面上。但我们可以用三元表达式来控制元素的隐藏样式啊。
微信小程序 腾讯地图显示偏差问题解决
10-16
本文主要探讨了微信小程序中腾讯地图显示偏差的解决方法，通过示例代码和详细解释，为开发者提供了一种有效的解决方案。 在小程序中，我们可以使用`<map>`组件来展示地图，并通过`markers`属性设置标记点。例如，...
微信小程序 loading（加载中提示框）实例
09-01
在微信小程序开发中，`loading`组件是一种常用的用户界面元素，用于向用户显示应用程序正在进行后台操作或数据加载的状态。这个组件通常以一个简单的动画形式呈现，比如旋转的圆圈，配以文字提示“加载中...”来告知...
微信小程序倒计时功能实例代码
12-29
button formType=submit class=btn hover-class='btn_on' bindtap='show'>使用说明</button> <button formType=submit class=btn btn2 hover-class='btn_on' bindtap='enter'>进入举报</button&gt...
uniapp、小程序 省市区选择,拉起弹窗选择
07-29
在IT行业中，尤其是在移动应用开发领域，`uniapp`是一个非常重要的工具，它是一个基于Vue.js的多端开发框架，可以用于开发H5、小程序、APP等。在创建交互丰富的用户体验时，用户可能会需要选择省市区这样的地理信息...
微信小程序实现轨迹回放的示例代码
10-15
在微信小程序中实现轨迹回放是一项实用的功能，它允许用户查看某一特定对象（如车辆、行人等）在过去的时间内移动的路径。以下是如何利用微信小程序的API和组件来实现这一功能的详细步骤。 首先，我们需要在`wxml`...
uni-app之v-show，v-if
snoto的专栏
03-15 5797
文章目录v-show，与v-ifv-show无效情况 v-show，与v-if 记录这个主要是遇到了v-show无效的情况，经过查询： 参考博文 参考博文 首先，看一下区别，说是 v-show是隐藏，显示； v-if是移除，添加 注：一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show更好。 v-show无效情况 v-show实现原...
uni-app v-show 和 focus无法一起使用，聚焦无效
最新发布
weixin_39579031的博客
05-15 536
uni-app 微信小程序handleClick 点击按钮的时候，需要把textarea 显示出来并聚焦，但是实际上安卓手机可以，但是苹果手机无法聚焦。一开始本来到网上找怎么用uniapp获取textarea元素，用ref怎么也获取不了textarea元素，后面发现官方文档写了。后面想估计是因为苹果手机的小程序的js代码执行比v-show更快，导致没有执行成功。因此用一个新的响应式变量延迟到下一个时间片执行便可以了。
uniapp v-show v-for
weixin_42262889的博客
04-11 2687
v-for="(value, index, key) in listData" value指值 key值键 index数组 bug 不能再相互嵌套的时候，同时弄for，否则部分功能失效 <view v-for="(value, index, key) in listData"> <view v-for="(values, indexs, keys) in list">...
前端小白001：关于uni-app的v-show在微信小程序上的一些bug及解决思路
ReXplan的博客
07-31 3561
关于uni-app的v-show在微信小程序上的一些bug及解决思路 今天遇到v-show在微信小程序不能及时触发的问题，代码如下： <div v-show="list.length > 0">显示数据</div> 这段代码很常见，但在小程序上不能及时触发就让人很烦恼，不过我额外添加一个属性触发v-show就行了，代码如下： //watch监听 watch{ list(n){ this.show = n.length > 0 } }, data(){ sho
uni-app小程序v-show内容始终不显示
weixin_43655896的博客
02-13 1070
<view class="title" v-show="searchList.length">联系人</view> ...... data() { return { searchList:[], } } 使用以上方式控制该标签的显示，判断条件为searchList数组的长度，数组为空不显示标签； 浏览器运行正常，但在小程序中数组非空时也不显示 解决方法：使用计算属性 <view class="title" v-show="sea.
微信小程序类似vue中v-show的属性hidden
qq_44213979的博客
07-28 1289
微信开发者文档基础组件中有hidden属性内容 hidden属性会收到display影响，如果样式需要用flex布局，可以在外边再写一个view,display布局在里面，hidden用在外边可以解决这个问题。 js中方法 data{ show:true } scanCode(){ this.setData({ show: !this.data.show }) }, ...
使用uniapp开发App，用v-if，v-show页面错位问题
bittingCat的博客
04-20 917
在用uniapp开发安卓、苹果app的时候，经常会出现一些莫名其妙的兼容性问题，比如自己在开发环境（h5）上好好的，结果去到真机上面，各种问题都出来了，比如表单错位，页面经过某些操作之后整个页面显示undefined。下面讲的页面表单错位问题。
uniapp微信小程序下拉刷新页面
08-23
在uniapp微信小程序中，可以使用下拉刷新组件来实现页面的下拉刷新。该组件可以通过使用小程序/uniapp原生page滑动来提高流畅度，并且可以直接使用组件方式来触发下拉刷新的方法。同时，该组件还包含了无数据时的空布局展示，并且可以根据需要自定义下拉刷新的样式。另外，使用组件的双向绑定v-model可以实现更加方便的数据处理。 然而，在使用mescroll-body并且使用v-show进行切换tabs时可能会出现一个问题，即滚动条位置一致的情况。这意味着上一页的滚动条位置会保持在下一页中。如果遇到这个问题，可以尝试使用mescroll-uni组件以及v-if的方法来解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [开源版发卡小程序源码 云盘发卡微信小程序源码带PC端 云盘发卡系统源码.rar](https://download.csdn.net/download/winkexin/88236712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uni-app/小程序自定义导航栏+下拉刷新完美解决方案(封装原生page滑动组件)](https://blog.csdn.net/weixin_43931876/article/details/116293055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [【uniapp】页面下拉刷新](https://blog.csdn.net/Qxn530/article/details/127450118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值