微信小程序布局 底部位置固定例子

经常会用到的地方就是购物车,还有自己定义的底部导航等等

效果图

wxml

<!--index.wxml-->
<view class='container'>
  <view class="logo">
    <image src='/images/avic_logo.png'></image>
    <view class="logo_ground"></view>
  </view>
</view>

wxss

/**index.wxss**/
page{
  background-color: #bcbcbc;
}

.logo{
  width: 100%;
  position: fixed;
  bottom:0px;
  display: flex;
  justify-content: center;
}

.logo image{
  width: 200rpx;
  height: 200rpx;
}

.logo_ground{
  position: fixed;
  width: 100%;
  height: 50rpx;
  bottom:0px;
  background-color: blueviolet;
  z-index: -1;
}