微信小程序电商实战-商品列表流式布局

喜欢吃鱼的青年 2018-01-26 17:04:47 ⋅ 200 阅读

今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

流式布局概念

流式布局也叫百分比布局
把元素的宽,高,margin,padding不再用固定数值,改用百分比,
这样元素的宽,高,margin,padding会根据页面的尺寸随时
调整已达到适应当前页面的目的.

先看效果:


如上图所示,为了能够看的更直观一点我给布局设置了红色虚线边框,整体页面根据元素的百分比进行布局。

直接看代码:

xxx.wxml

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
  <view class="goods" style="width:100%">
    <view class="mg_item">
      <view wx:for="{{col1}}" wx:key="id">
      <view class="item_info">
        <image src="{{item.imageurl}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
            <view class="product-name">
              {{item.name}}            </view>
            <view class="product-price-wrap">
              <p class="product-price-new">¥{{item.newprice}}</p>  
              <p class="product-price-old">¥{{item.oldprice}}</p> 
               <p class="discount">{{item.discount}}折</p>   
            </view>
      </view>
    </view>
    <view class="mg_item">
      <view wx:for="{{col2}}" wx:key="id">
      <view class="item_info">
        <image src="{{item.imageurl}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
            <view class="product-name">
              {{item.name}}            </view>
            <view class="product-price-wrap">
              <p class="product-price-new">¥{{item.newprice}}</p>  
              <p class="product-price-old">¥{{item.oldprice}}</p> 
               <p class="discount">{{item.discount}}折</p>   
            </view>
      </view>
    </view>
  </view></scroll-view>
 <view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.imageurl}}" bindload="onImageLoad"></image></view> 

通过查看class标签发现有两个img_item ,所以采取的是左右分别加载数据方式。

xxx.js

Page({  
data: {    
   scrollH: 0,    
   imgWidth: 0,    
   loadingCount: 0,    
   images: [],    
   col1: [],    
   col2: []  },  
onLoad: function () {    wx.getSystemInfo({      
       success: (res) => {        
           let ww = res.windowWidth;        
           let wh = res.windowHeight;        
           let imgWidth = ww * 0.48;        
           let scrollH = wh;        
           this.setData({          
               scrollH: scrollH,          
               imgWidth: imgWidth            });        
       //加载首组图片        this.loadImages();      }    })  },  
onImageLoad: function (e) {    
   let imageId = e.currentTarget.id;    
   let oImgW = e.detail.width;         //图片原始宽度    let oImgH = e.detail.height;        //图片原始高度    let imgWidth = this.data.imgWidth;  //图片设置的宽度    let scale = imgWidth / oImgW;        //比例计算    let imgHeight = oImgH * scale;      //自适应高度    let images = this.data.images;    
   let imageObj = null;    
   for (let i = 0; i < images.length; i++) {      
       let img = images[i];      
       if (img.id === imageId) {            imageObj = img;      
             break;      }    }    imageObj.height = imgHeight;    
    let loadingCount = this.data.loadingCount - 1;    
    let col1 = this.data.col1;    
    let col2 = this.data.col2;    //判断当前图片添加到左列还是右列    if (col1.length <= col2.length) {      col1.push(imageObj);    } else {      col2.push(imageObj);    }    let data = {      
    loadingCount: loadingCount,      
        col1: col1,      
        col2: col2    };    
        //当前这组图片已加载完毕,则清空图片临时加载区域的内容    if (!loadingCount) {      data.images = [];    }    
        this.setData(data);  },  
        loadImages: function () {    
        let images = [      {        
        goodId: 0,        
        name: '泊尔崖蜜蜜光面膜(5片盒装)',        
        url: 'bill',        
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',        newprice: "86",        
        oldprice: "88",        
        discount: "8.8",        
        height: 0,      },      {        
        goodId: 1,        
        name: '透无瑕矿物养护两用粉饼#03',        
        url: 'bill',        
        imageurl: 'https://a.appsimg.com/upload/brand/upcb/2017/10/26/77/ias_150899004322921_604x290_80.jpg!75.webp',        
        newprice: "147.00",        
        oldprice: "150.00",        
        discount: "8.8",        
        height: 0,      },      {        
        goodId: 2,        
        name: '川水水光面膜(5片盒装)',        
        url: 'bill',        
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',        newprice: "86.00",        
        oldprice: "88.00",        
        discount: "8.8",        
        height: 0,      },      {        
        goodId: 3,        
        name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',        
        url: 'bill',        
        imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',        newprice: "97.00",        
        oldprice: "99.00",        
        discount: "8.8",        
        height: 0,      },      {        
        goodId: 4,        
        name: '时焕颜亮采套装',        
        url: 'bill',        
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',        newprice: "398.00",        
        oldprice: "459.00",        
        discount: "8.8",        
        height: 0,      }    ];    
        let baseId = "img-" + (+new Date());    
        for (let i = 0; i < images.length; i++) {      images[i].id = baseId + "-" + i;    }    
        this.setData({      
        loadingCount: images.length,      
        images: images    });  } })

如下代码:
if (col1.length <= col2.length) {
col1.push(imageObj);
} else {
col2.push(imageObj);
}

检索商品集合根据高度分别放入两个集合中。

xxx.wxss

page{  
  height: 100%;  
  background-color: #F3F4F6;
} 
/* 单个图片容器的样式 */

.img_item {  
   width: 48.5%;  
   margin: 2px;  
   display: inline-block;  
   vertical-align: top;  
   background-color: #ffffff;  
   font-size: 24rpx; }
.item_info{  
   border-top:1px dashed red; }
.product-name{  
   color: #000;  
   /* height: 28px; */    text-align:left;  
   margin: 0px 5px;    margin-bottom: 5px; }
.product-price-wrap .product-price-new{  
   color: #e80080;  
   margin-left:5px;  
   font-weight:900; }
.product-price-wrap .product-price-old{  
   color: #888;  
   text-decoration:
   line-through;  
   padding-left: 2px; }
.product-price-wrap .discount{  
   margin-left: 30px;  
   background-color: #000;  
   color: #fff; }

好了,商品列表流式布局方式 代码示例已经讲完了,赶紧尝试一下吧!

更多精彩内容请关注“IT实战联盟”公众号哦~~~



全部评论: 0

    我有话说:

    程序商城(六):动态API实现新品特卖商品布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    程序实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序实战-首页(下)

    上一篇:程序实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战-首页(上)

    上一篇:程序实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战-购物车(上)

    好久没更新程序实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序教程推出.......

    程序实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为程序做一下准备前期准备工作~~

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战-商品详情加入购物车(下)

    今天会接着上一篇开始写商品详情页加入购物车的部分,直接看效果......

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战-购物车(下)

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息和个人中心页面布局

    程序商城(三):首页福利专场无限下拉刷新动态API数据实现

    首页第5个模块-福利专场,通过https调用API数据模型来实现无限下拉刷新......

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(八):缓存实现商品购物车功能

    商品详情页将商品信息放入缓存,购物车页面读取缓存获取商品信息,购物车商品计算和删除缓存商品

    程序商城(五):动态API实现商品详情页(下)

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序-template使用:实现购物车商品数量加减功能

    上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量加减和价格计算功能......

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然