【hidden】微信小程序hidden属性使用示例
时间: 2023-07-30 13:12:00 浏览: 92
hidden属性是微信小程序组件的一个属性,用于控制组件的显示和隐藏。当hidden属性的值为true时,表示组件隐藏;当hidden属性的值为false时,表示组件显示。下面是一个使用示例:
```html
<view hidden="{{isHidden}}">这是一个隐藏的组件</view>
```
在上面的示例中,我们定义了一个view组件,并且设置了hidden属性,其值为isHidden。isHidden可以是一个变量或一个Boolean值,用于控制组件的显示和隐藏。当isHidden的值为true时,该组件会被隐藏;当isHidden的值为false时,该组件会被显示。
需要注意的是,使用hidden属性隐藏组件时,组件并没有被销毁,只是不再显示在页面上。如果需要销毁组件,可以使用wx:if或者hidden的兄弟属性wx:else来实现。
相关问题
微信小程序开发demo代码示例
以下是一个简单的微信小程序 demo 代码示例:
app.js
```
App({
globalData: {
userInfo: null
}
})
```
index.js
```
Page({
data: {
message: 'Hello, Mini Program!'
},
onLoad: function () {
console.log('Page Loaded')
},
onShow: function () {
console.log('Page Shown')
},
onHide: function () {
console.log('Page Hidden')
},
onUnload: function () {
console.log('Page Unloaded')
}
})
```
index.wxml
```
<view class="container">
<text>{{message}}</text>
</view>
```
index.wxss
```
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
```
这个 demo 会在页面中心显示一条信息 "Hello, Mini Program!",并在控制台输出页面生命周期事件。
微信小程序 v-show
微信小程序中没有直接的 v-show 属性,但可以通过条件渲染来实现类似的效果。条件渲染可以使用 wx:if 或者 hidden 属性来控制组件的显示和隐藏。
使用 wx:if 来条件渲染组件时,如果条件为真,则组件会被渲染到页面上;如果条件为假,则组件将不会被渲染到页面上。
示例代码如下:
```html
<view wx:if="{{isShow}}">我显示了</view>
<view wx:if="{{!isShow}}">我隐藏了</view>
```
在上面的代码中,根据 isShow 的值来判断是否显示相应的 view 组件。
另外,使用 hidden 属性来条件渲染组件时,如果条件为真,则组件会显示;如果条件为假,则组件会隐藏。
示例代码如下:
```html
<view hidden="{{!isShow}}">我显示了</view>
<view hidden="{{isShow}}">我隐藏了</view>
```
在上面的代码中,根据 isShow 的值来判断是否隐藏相应的 view 组件。
需要注意的是,使用 wx:if 会销毁和重建组件,而使用 hidden 只是简单地控制显示和隐藏,没有销毁和重建的开销。因此,在性能要求较高的场景下,可以使用 hidden 属性进行条件渲染。