我们期待的效果:下拉时候 固定不动的那种
上代码
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,
好像没有什么特别的点