微信小程序常见的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
        });
      },
    })
  },
})