整理微信小程序控制view隐藏显示的五种方法

简介: 整理微信小程序控制view隐藏显示的五种方法

一、使用wx:if指令

<view wx:if="{{3>2}}">我是wx:if</view>

二、使用opacity属性

<view style="opacity:{{opacity}}">我是opacity属性</view>

三、使用display属性

<view style="display:none">每个组件都有的display属性</view>//元素不显示
  
<view style="display:block">每个组件都有的display属性</view>//元素显示
  
<view hidden="{{'adfad'=='adf'}}">每个组件都有的dy属性</view>//当然在{{}}表达式中也可以使用一些简单的运算。

四、还有一种方式可以使用绝对定位

使元素脱离文档流,通过改变元素的top和left属性值控制元素的显示与否

五、使用hidden属性

在页面的js文件中通过修改hidden值来控制

<view hidden="true">每个组件都有的hidden属性</view>
  
<view hidden='false'>每个组件都有的hidden属性</view>
  
<view hidden="{{hiddenn}}">每个组件都有的hidden属性</view>
目录
相关文章
|
12月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
小程序
微信小程序监听页面滚动位置
微信小程序监听页面滚动位置
867 0
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
1309 1
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
1815 0
|
JavaScript 前端开发
var、let和const的作用及区别
这篇文章详细解释了JavaScript中`var`、`let`和`const`三种变量声明方式的作用及它们在作用域、可变性、变量提升等方面的区别,并提供了示例代码来阐明各自的特性和适用场景。
|
小程序
微信小程序——如何获取到输入框的值
微信小程序——如何获取到输入框的值
1489 0
|
小程序 JavaScript
微信小程序系列——如何获取input和textarea的内容
微信小程序系列——如何获取input和textarea的内容
|
前端开发 小程序
微信小程序系列——无缝引入CSS或者WXML文件
微信小程序系列——无缝引入CSS或者WXML文件
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
1906 0
|
前端开发 JavaScript
uniapp 创建组件
uniapp 创建组件
140 0
uniapp 创建组件