微信小程序之GoodsAction 商品导航

一、简介：

写这篇文章主要是讲解这个GoodsAction 商品导航的样式是怎么写的，让我们可以根据这个样式写出属于自己的GoodsAction 商品导航。

二、效果图：

三、素材图：

四、代码分解：

让图片与文字一个在上一个在下，且让图片与文字上下左右居中布局。
wxml：

<view class="bottom_liuyan" >
  <view class="bottom_image"><image class="bottom_img" src="../../images/xiaoxi.png"></image></view>
  <view>留言</view>
</view>

wxss：

.bottom_liuyan{
  width: 45%;
  height: 100rpx;
  background-color: white;
  display: flex;
  /* 上下布局 */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 左右居中 */
  align-items: center;
}
.bottom_image{
  width: 60%;
  height: 60%;
}
.bottom_img{
  width: 100%;
  height: 100%;
}

五、整体代码：

wxml：

<!-- 商品详情底部按钮 -->
<view class="bottom_kuangjia">
  <view class="bottom_left">
    <view class="bottom_liuyan" >
      <view class="bottom_image"><image class="bottom_img" src="../../images/xiaoxi.png"></image></view>
      <view>留言</view>
    </view>
    <view class="gwc" >
      <view class="bottom_image"><image class="bottom_img" src="../../images/cart1.png"></image></view>
      <view>购物车</view>
    </view>
  </view>
  <view class="bottom_right">
    <button class="add_gwc" >加入购物车</button>
    <button class="buy" >立即购买</button>
  </view>
</view>

wxss：

/* 底部按钮 */
.bottom_kuangjia{
  width: 100%;
  height: 100rpx;
  position: fixed;
  right: 0;
  bottom: 0rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.bottom_left{
  width: 35%;

  height: 100rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.bottom_liuyan{
  width: 45%;
  height: 100rpx;
  background-color: white;
  display: flex;
  /* 上下布局 */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 左右居中 */
  align-items: center;
}
.bottom_image{
  width: 60%;
  height: 60%;
}
.bottom_img{
  width: 100%;
  height: 100%;
}
.gwc{
  width: 55%;
  height: 100rpx;
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom_right{
  width:65%;
  background-color: greenyellow;
  height: 100rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.add_gwc{
  width: 50%;
  height: 100rpx;
  background-color: rgb(255, 147, 115);
  border-radius: 0;
}
.buy{
  width: 50%;
  height: 100rpx;
  background-color: rgba(248, 32, 32, 0.918);
  border-radius: 0;
}