小程序显示隐藏

最新推荐文章于 2023-12-28 10:32:35 发布

weixin_30457065

最新推荐文章于 2023-12-28 10:32:35 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mxdmg/p/10019863.html

本文探讨了小程序中实现元素显示隐藏的两种方法：使用wx:if和hidden属性。详细比较了这两种方法的优缺点，wx:if适用于不频繁切换的情况，而hidden则适合频繁切换的场景。同时介绍了如何通过setData()方法更新数据以触发界面更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚开始接触小程序，发现是跟vue差不多的写法。但是又比vue少了很多功能，很不习惯

然后想做个显示隐藏的功能，找了网上大多数人都是：

建两个类：

vshow:{ display : block }
vhidden:{ display : none }

然后在wxml中是：

<view class="{{ showView ? vshow : vihdden }}">
    显示隐藏的元素、上面class中是三元表达式
</view>
<view bindtap="show">点击我切换效果</view>

js中：

data:{
    showView:false //通过true 和 false 来切换类，达到显示隐藏的效果
}    
show:function(){
　　this.setData({
     　showView:!this.data.showView
　　})
}

看了很多文章都是这样子做。当然还有别的更简单的做法。

使用 wx:if 跟 hidden

wx:if:

wxml:

<view wx:if="{{showView}}">
    显示隐藏的元素
</view>
<view bindtap="show">点击我切换效果</view>

js中:

data:{
    showView:false //通过true 和 false 来控制显示隐藏
}    
show:function(){
　　this.setData({
     　showView:!this.data.showView
　　})
}

代码差不多。但是看起来就简洁了不少。

hidden:跟 wx:if 其实是差不多的。只是、hidden为true的时候进行隐藏。不然就是显示。所以改一下showView的初始值就可以了

区别：

wx:if : 隐藏的时候不渲染。显示的时候才会。不频繁切换用这个。

hidden:显示隐藏都会渲染。如果是切换频繁的话，用这个

bindtap

转载于:https://www.cnblogs.com/mxdmg/p/10019863.html

小程序 显示隐藏