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

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

效果图

wxml

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;
}