小程序如何做一个底部固定工具栏

我们期待的效果:下拉时候 固定不动的那种
在这里插入图片描述

上代码

wxml

<view class="btm_tool">

<view class="tool_item">
  <view class="iconfont icon-LIVECHAT"></view>
    <view>客服</view>
  </view>

  <view class="tool_item">
  <view class="iconfont icon-ziyuan1"></view>
    <view>分享</view>
  </view>

  <view class="tool_item">
  <view class="iconfont icon-gouwuche"></view>
    <view>购物车</view>
  </view>

  <view class="tool_item btn_cart">
   加入购物车
  </view>

  <view class="tool_item btn_buy">
    立即购买
  </view>
    
 
</view>
wxss
.goods_info .goods_info_title {
  color: #af64ed;
  padding: 20rpx;
  font-size: 32rpx;
}
.btm_tool {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: white;
  display: flex;
}
.btm_tool .tool_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btm_tool .btn_cart {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: darkkhaki;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 600;
}
.btm_tool .btn_buy {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 600;
}

其实用less来写会更好一点emm,
在这里插入图片描述
在这里插入图片描述

好像没有什么特别的点

发布了60 篇原创文章 · 获赞 18 · 访问量 5229

猜你喜欢

转载自blog.csdn.net/szuwaterbrother/article/details/105426978