1.微信小程序的显示和隐藏
方法一：
html部分
<button type="primary" bindtap="openPopup" data-index="1">打开弹窗</button>
<!-- 中间弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='1'}}" bindtap="closePopup"></view>
<view class="info-center" style="top:{{height*0.045}}px;height:{{height*0.92}}px;" wx:if="{{showIndex=='1'}}">
<view class="rese" bindtap="closePopup">
X
</view>
</view>js部分
Page({
/**
* 页面的初始数据
*/
data: {
showIndex:null,//打开弹窗的对应下标
height:'',//屏幕高度
},
// 打开弹窗
openPopup(e){
var index = e.currentTarget.dataset.index;
this.setData({
showIndex:index
})
},
//关闭弹窗
closePopup(){
this.setData({
showIndex:null,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
// 动态获取屏幕高度
wx.getSystemInfo({
success: (result) => {
that.setData({
height: result.windowHeight
});
},
})
},
})
wxss部分
.bigHeight{
height:100%;
}
/* 蒙层 */
.popup-box{
position: absolute;
z-index: 99;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.rese{
position: absolute;
width: 50rpx;
height: 50rpx;
text-align: center;
right: 0rpx;
top: 10rpx;
border-color: white;
}
/* 中 */
.info-center{
position: fixed;
z-index: 999;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.home{
height: 80%;
overflow-y: auto;
/* background-color: #33ccff; */
margin-top: -205rpx;
}
.house{
display: flex;
text-align: center;
justify-content: center;
}
.bottom{
z-index: 1000;
position: fixed;
bottom: 50rpx;
}
/* 自定义内容（根据自己需求更改,可删除） */
button{
margin: 15rpx 0;
}
要点总结：
先在data中声明变量，在html的标签中写入方法，代入到js中，一个是打开窗口的状态，一个是关闭窗口的状态
效果图
方法二 倒计时六秒后消失
html部分
<text wx:if="{{show}}" style='color:red;margin-right: 10rpx;'>倒计时{{countDownNum}}s</text>
js部分
Page({
/**
* 页面的初始数据
*/
data: {
countDownNum: '6',//倒计时初始值
show:true
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
//什么时候触发倒计时，就在什么地方调用这个函数
this.countDown();
},
countDown: function () {
let that = this;
let countDownNum = that.data.countDownNum;//获取倒计时初始值
let isDisabled = that.data.isDisabled;
//如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
that.data.timer = setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
//在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
if (countDownNum == 0) {
that.setData({
title: 'aaa',
show:false,
})
clearInterval(that.data.timer);
//这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
//因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
// clearInterval(that.data.timer);
//关闭定时器之后，可作其他处理codes go here
}else{
//每隔一秒countDownNum就减一，实现同步
countDownNum--;
//然后把countDownNum存进data，好让用户知道时间在倒计着
that.setData({
countDownNum: countDownNum,
isDisabled:true
})}
}, 1000)
},
})
方法三：wx:if和hidden
hidden 属性
在 Vue 中我们可以通过 v-show 来控制组件是否显示
在小程序中所有组件都支持hidden属性，我们可以通过hidden属性来控制组件是否显示隐藏
wx:if
如果通过 wx:if 来隐藏组件，在页面结构中根本就不会渲染这个组件：
wx:if和hidden的区别
和 Vue 中 v-if/v-show 一样，不经常切换使用 v-show(wx:if)，经常切换使用 v-if(hidden属性)官方解释：因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
demo：
<view wx:if="{{false}}">
BNTang
</view>效果图
注：如果通过 hidden 来隐藏组件，在页面结构中是会渲染这个组件的（在 hiidden 当中 true 代表隐藏，false 代表不隐藏）：
<view hidden="{{true}}">
BNTang
</view>
总结：
也正是因为这个区别，就决定了它们不同的应用场景：
如果组件不需要频繁的切换（隐藏和显示之间），那么用wx:if
如果组件需要频繁的切换（隐藏和显示之间），那么用hidden
原因很简单，因为hidden会将组件渲染到页面结构中，只是通过修改display属性来实现隐藏和切换，所以不怎么消耗性能。文章来源：https://www.toymoban.com/news/detail-801212.html而 wx:if 不会将组件渲染到页面结构中，每次显示都会重新创建组件，比较消耗性能。文章来源地址https://www.toymoban.com/news/detail-801212.html
到了这里，关于微信小程序常见的demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
