微信小程序的底部和顶部固定（购买和导航栏）

微信小程序的底部和顶部固定

在wxss样式里添加如下代码
顶部固定 代码片.

position: fixed;   top: 0rpx;

底部固定 代码片.

position: fixed;   bottom: 0rpx;

补充增加类似淘宝的底部购买栏

wxml代码

 
	
	    
	    主页
  
  
    
    购物车
  
  
    加入购物车
    立即购买
  

wxss代码

.goodsaction{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  height: 100rpx;
  justify-content: space-around;
  background-color: white;
  align-content: center;
  align-items: center;
}
.logo{
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-content: center; */
  width: 100%;
  height: 70%;
  margin-top: 1rpx;
  margin-left: 10rpx;
}

.goodsaction image{
  width: 55%;
  height: 55%;
  margin-left: 20rpx;
  
}
.goodsaction text{
  width: 80%;
  height: 40%;
  font-size: 16rpx;
  margin-left: 23rpx;
}
.action_btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 75%;
  height: 80%;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}
.btn_left{
  background-color:#ff9900;
  width: 50%;
  height: 100%;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.856);
  border-bottom-left-radius: 50rpx;
  border-top-left-radius: 50rpx;
}
.btn_right{
  background-color:#ff3300;
  width: 50%;
  height: 100%;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.856);
  border-bottom-right-radius: 50rpx;
  border-top-right-radius: 50rpx;
}

模拟器显示效果如下图