微信小程序 — 实现一个商品展示

这里，我们来实现一个在首页或则列表展示的商品样式。实现的效果如下图所示：

可以对上面的样式进行分解，可以获得如下信息：

1.整个Item是与视口边缘偏移了一定像素。

2.显示布局位上下，下部信息显示又分为左右。

3.整个Item使用了圆角效果。

4.存在一个购买按钮，需要实现如何监听当前点击的商品

整个框体的样式

.goods_item_container {
  height:290px;
  background-color: #fff;
  margin: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

我们依然通过flex布局显示，需要设置flex的方向位列模式。背景填充为白色。margin就是设置整个框体与周围的偏移像素。

定义图片样式

.goods_item_img_container {
  display: flex;
  justify-content: center;
}

图片样式就很简单，我们需要设置下图片水平居中显示，其它参数再wxml中进行设置：

<view class="goods_item_img_container" bindtap="OnBindDetail">
    <image src="/res/swiper_1.jpg" mode="aspectFit"></image>
  </view>

我们为点击图片响应了一个OnBindDetail函数，此函数需要在.js文件中进行定义：

  /**
   * 组件的方法列表
   */
  methods: {
    OnBindDetail(){
      wx.navigateTo({
        url: '/pages/detail/detail',
      })
    }

然后下面的价格个后面按钮是左右布局，我们需要定义一个左右布局的样式

左右布局样式

.good_item_h_layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

我们使用了justify-content:space-between。此属性的作用就是告诉下面的元素是靠左右两端的方式排列。

按钮样式

我们需要定义一个红色的按钮样式，如果使用系统自带的button控件，会发现自己的样式怎么没用生效，如果使用系统的button控件，样式的定义需要覆盖整个按钮默认的样式定义：

.good_item_btn {
  position:relative;
  display:block;
  /* margin-left:auto; */
  /* margin-right:auto; */
  padding-left:0px;
  padding-right:0px;
  /* box-sizing:border-box; */
  font-size:12px;
  text-align:center;
  /* text-decoration:none; */
  line-height:0.8;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#fff;
  background-color:#ff0000;
}

.good_item_btn_hover {
  background-color:#e66666;
}

我们可以直接修改上面的样式信息来达到修改默认Button样式的目的。

整个wxml的写法

<!--components/goods_item/goods_item.wxml-->
<view class="goods_item_container">
  <view class="goods_item_img_container" bindtap="OnBindDetail">
    <image src="/res/swiper_1.jpg" mode="aspectFit"></image>
  </view>
  
  <text class="goods_item_name">纯高粱酒53°</text>
  <view class="good_item_h_layout">
    <text class="goods_item_price">￥52.00</text>
    <view class="good_item_buy_btn">
      <button class="good_item_btn" hover-class="good_item_btn_hover">加入购买</button>
    </view>
  </view>
</view>

整个样式

/* components/goods_item/goods_item.wxss */

.goods_item_container {
  height:290px;
  background-color: #fff;
  margin: 12px;
  border-radius: 8px;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
}

.goods_item_img_container {
  display: flex;
  justify-content: center;
}

.goods_item_name {
  font-size: 14px;
  color: #010101;
  margin-left: 15px;
}

.good_item_h_layout {
  display: flex;
  justify-content: space-between;
  /* background-color: #000; */
  align-items: center;
}

.goods_item_price {
  display: flex;
  font-size: 14px;
  margin-top: 4px;
  margin-left: 15px;
  color:#ff0000;
  /* flex-grow: 0.9; */
  /* background-color: royalblue; */
}

.good_item_buy_btn {
  height:20px;
  width:65px;
  border-radius: 8px;
  color:#fff;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.good_item_btn {
  position:relative;
  display:block;
  /* margin-left:auto; */
  /* margin-right:auto; */
  padding-left:0px;
  padding-right:0px;
  /* box-sizing:border-box; */
  font-size:12px;
  text-align:center;
  /* text-decoration:none; */
  line-height:0.8;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#fff;
  background-color:#ff0000;
}

.good_item_btn_hover {
  background-color:#e66666;
}