微信小程序常见的demo

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属性来实现隐藏和切换，所以不怎么消耗性能。

而 wx:if 不会将组件渲染到页面结构中，每次显示都会重新创建组件，比较消耗性能。