微信小程序长页面中弹框如何居中 微信小程序怎么让按钮居中

文章摘要：微信小程序长页面中弹框如何居中 微信小程序怎么让按钮居中

微信小程序长页面中弹框居中的案例： 在对应的wxml文件中添加以下代码： <form bind […]

微信小程序长页面中弹框居中的案例：

在对应的wxml文件中添加以下代码：

<form bindsubmit="formSubmit" bindreset="formReset">

    <view class="commodity_screen" bindtap="hideModal2" wx:if="{{!flag}}"></view>

    <view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">

      <view class='popup-container'>

        <view class="wx-popup-title">添加备注</view>

        <view class="wx-popup-con">

          <view class="input">

            <input class="inputRemark" name="nickName" value="{{nickName}}" placeholder="请输入备注" bindinput="remarkInput" />

          </view>

        </view> 

        <view class="wx-popup-btn">

          <button class="btn-no" formType="reset" bindtap='hideModal2'>取消</button>

          <button class="btn-no" formType="submit">确认</button>

        </view>

      </view>

    </view>

  </form>

在对应的js文件中添加以下代码：

Page({

  data: {

    windowWidth: '',

    windowHeight: '',

  },

  onShow: function() {

    //获取系统信息:获取当前屏幕可见区域的宽和高

    wx.getSystemInfo({

      success: function(res) {

        that.setData({

          "windowWidth": res.windowWidth, //可使用窗口宽度，单位px

          "windowHeight": res.windowHeight, //可使用窗口高度，单位px

        })

        console.log(res.windowWidth, that.data.windowWidth);

        console.log(res.windowHeight, that.data.windowHeight);

      },

    })

  },

})

在对应的wxss文件中添加以下代码:

.wx-popup {

  position: fixed;

  z-index: 2000;

}

.popup-container {

  position:fixed;

  left: 50%;

  top: 50%;

  width: 80%;

  max-width: 600rpx;

  background: #fff;

  z-index: 2000;

}