微信小程序动态的显示或隐藏控件的方法(两种方法)_网络技术

微信小程序动态的显示或隐藏控件的方法(两种方法)

发布时间 - 2026-01-10 22:47:33 点击率：次

在微信小程序开发时，经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况，下面就来实践一把！上效果先

它的实现方法有两种，

第一种方法：单选法，就是隐藏与显示根据条件二选一，代码如下:

<view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">
 <text class="bright789-text">我是被显示被隐藏控件</text>
 </view>

第二种方法：叠加法，就是先隐藏，如果是显示，再叠加一个显示，如果是隐藏就不动，代码如下：

<view class="bright789_view_hide {{showView?'bright789_view_show':''}}">
 <text class="bright789-text">我是被显示被隐藏控件</text>
 </view>

这种办法一开始看有点头晕，所以把它分解成两个状态：

显示状态:

因为showView是true，所以我们把它转成如下样子

<view class="bright789_view_hide bright789_view_show}">
 <text class="bright789-text">我是被显示被隐藏控件</text>
 </view>

看到了吧，后面的bright789_view_show会把前面的bright789_view_hide重叠上去，注意这里是重叠，所以顺序不能反过来像bright789_view_show {{showView?'':' bright789_view_show '}}这种是不行的
隐藏状态:

相当于如下代码:

<view class="bright789_view_hide }">
 <text class="bright789-text">我是被显示被隐藏控件</text>
 </view>

最后我把demo的js,wxml和wxss代码贴一下:

Js文件:

Page({
 data:{
 showView:true
 },
 onLoad:function(options){
 // 生命周期函数--监听页面加载
 showView:(options.showView=="true"?true:false)
 }
 ,onChangeShowState:function(){
 var that=this;
 that.setData({
  showView:(!that.data.showView)
 })
 }
})

Wxml文件代码:

<viewclass="page">
 <view >
  <buttonbindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>
 </view>
 <view class="bright789_view_hide{{showView?'bright789_view_show':''}}">
 <textclass="bright789-text">我是被显示被隐藏控件</text>
 </view>
</view>

Wxss文件代码：

.bright789-text{
 font-size: 40rpx;
 line-height: 40px;
 color: #ff0000;
}
.bright789_view_hide{
 display: none;
}
.bright789_view_show{
 display: block;
}

# 微信小程序 # 控件隐藏 # 微信小程序调用摄像头隐藏式拍照功能 # 微信小程序实现动态显示和隐藏某个控件 # 微信小程序 scroll-view隐藏滚动条详解 # 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件 # 微信小程序之滑动页面隐藏和显示组件功能的实现代码 # 我是 # 把它 # 种方法 # 周期函数 # 我把 # 不动 # 要用 # 这种情况 # 会把 # 就来 # 有两种 # 转成 # 程序开发 # 单选 # 看到了 # 加载 # gt # bright789_view_hide # bright789_view_show # 微信小

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：手机动态网站制作软件,手机QQ动态页面怎么设置？

下一篇：云主机建站：如何选择最适合自己网站需求的云主机配置？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：手机动态网站制作软件,手机QQ动态页面怎么设置？

下一篇：云主机建站：如何选择最适合自己网站需求的云主机配置？