微信小程序-底部悬浮

1212.gif

直接上代码，注释都有

<!--index.wxml-->
<view class="cnt red"></view>
<view class="cnt yellow"></view>
<view class="cnt blue" bindtap="didClickBlue">点我让底部间距为0</view>
<!-- 
最后一个视图底部空出100rpx，跟suspendV高度一致,
如果不加100rpx,会导致显示不全
-->
<view class="cnt green" bindtap="didClickGreen" style="margin-bottom:{{bottomMargin}}rpx">点我让底部空出间距</view>

<!-- 底部悬浮,使用绝对定位fixed -->
<view class="suspendV">我是悬浮的</view>

/**index.wxss**/
.cnt {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

/* 底部悬浮 */
.suspendV {
  height: 100rpx;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}

//index.js
Page({
  data: {
    bottomMargin: 0
  },
  didClickBlue: function () {
    this.setData({
      bottomMargin: 0
    })
  },
  didClickGreen:function() {
    let info = wx.getSystemInfoSync();
    let w = info.windowWidth;
    this.setData({
      bottomMargin: 100
    })
  }
})