微信小程序底部按钮固定

以下示例代码是从一个项目中截取的关键代码，已省略一些非必要的样式代码

效果图如下

效果图

主要用到的代码为 position: fixed和bottom:0

wxml代码如下:

  <!-- 平行级元素 -->
  <view class="shop">
    <view class="cell_name">商品金额</view>
    <view class="cell_disc">运费金额</view>
  </view>
  <!-- 需要固定的按钮 -->
  <button>评论</button>

wxss代码如下:

.shop{
  margin-bottom: 120rpx;
}
button{
  width: 100%;
  height: 100rpx;
  position: fixed; 
  bottom: 0;
}

讲解代码:

position: fixed是主要代码，设置按钮为固定

bottom: 0意思是固定在底部0的位置，可根据需要自行调整合适的位置

margin-bottom: 120rpx 因为按钮的高度设置为100rpx，所以要把上一个盒子的样式设置为margin-bottom>100rpx，不然会挡住最下面的控件