25-微信小程序商城 我的收藏（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

我的收藏

本节主要讲解我的收藏界面的实现。效果如图15-9所示。
内容的布局分析可以参考12.8节“销售排行”。
实现功能的.wxml文件代码示例如下：

<!--收藏-1行2列：左侧图片，右侧3行文本--> 
<view class='text'>
  <view class='line_y'></view>
  <text>我的收藏列表</text>
</view>

<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp01.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>销售排行产品名称01</text>
      <text class="txt2">150g加量装(洗面奶 护肤化妆品</text>
      <text class="txt2">¥：168</text>
    </view>
  </view>
</navigator>  

<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp02.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>我的收藏产品01</text>
      <text class="txt2">150g加量装(洗面奶 护肤化妆品</text>
      <text class="txt2">¥：258.00</text>
    </view>
  </view>
</navigator>  

<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp03.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>御泥坊 亮颜补水面膜贴21片</text>
      <text class="txt2">补水保湿面膜 亮肤淡斑 晒后修护 </text>
      <text class="txt2">¥：368.00</text>
    </view>
  </view>
</navigator>  

<navigator url='/pages/fenlei/yemian/01-xiangxi'>
  <view class='paihang'>
    <image class="paihang-img" src='/img/cp04.jpg' />
    <view class='two-line-text'>
      <text class='txt1'>自然堂雪域精粹系列</text>
      <text class="txt2">冰肌水（清润型）+乳液 </text>
      <text class="txt2">¥：155.00</text>
    </view>
  </view>
</navigator>  

.wxss文件代码示例如下：

/*区块标题*/
.line_y{
  width: 3px;
  height: 18px;
  display: inline-block; 
  background-color:  darkcyan;  
}
view.text
{
  display: flex;
  align-items: center;
  position: relative; 
  padding: 6px 6px 6px 6px ; 
  background-color:  lightgoldenrodyellow;
}
view.text text{ 
  margin-left: 6px;
}

/* 1行2列：左图片，右文字（多行文字） */
/* 第2层样式 */
.paihang{
    display: flex; /* felx模式，默认图片和文字区块，从左到右排列，也就是1行2列 */
    margin: 1rpx;
    border: #ddd solid 1px;  /* 每个产品信息下面的横线 */
    padding: 10rpx;
}
.paihang-img{
    width: 80px;
    height: 80px;
}
.two-line-text{
    padding: 3px;
    display: flex; /* 定义flex后，下面的属性才能生效 */
    flex-direction: column; /* 将默认的从左到右布局重新定义为从上到下的多行排列布局 */
}
.txt1{
    margin: 3px 3px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; color:  #09bb07;
}
.txt2{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}
.txt3{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

标签：3px,flex,color,微信,程序,6px,margin,商城
来源： https://blog.51cto.com/u_13898481/2890827