电商类小程序实战教程 Vol.2:列表加载
作者 | 许诺
在上一期文章中,我们以爱范儿旗下的玩物志(微信号 coolbuy)电商小程序作为 Demo,介绍了首页 banner
部分的开发,以及微信小程序内置组件、数据绑定和发送请求 API 的用法。
本期,知晓程序依然以玩物志电商小程序为基础,为大家带来有关于列表加载的实现教程。
为布局而生的 flex
传统的布局方式一般都是基于 div
盒子模型,利用 float
, position
, display
来进行布局。
每个前端开发者对这些布局方式都非常熟悉。对一些特殊的布局来说,使用这些属性并不方便,由此还衍生出各种 hack 方案。直到 CSS3 提出了专为布局而生的解决方案,就是 flex
布局。
但是,由于浏览器的兼容问题,大多数开发者都不敢将 flex
布局直接应用到实际项目之中。在常规项目中,大量应用 flex
布局还需要一个过程。
而对于 WeChat Only 的小程序来说,则完全不用担心有浏览器兼容的问题,它只要适配微信客户端即可。同时,由于小程序的布局不会非常复杂,所以,也不用过多地担心大量使用 flex
引起的性能问题。
我们可以放心地在小程序中使用 flex
布局。
如何更方便地使用 rpx
rpx
的全称是 responsive pixel,它是小程序自己定义的一个尺寸单位,可以根据当前设备的屏幕宽度进行自适应。
小程序中规定,所有的设备屏幕宽度都为 750rpx
,根据设备屏幕实际宽度的不同,1rpx
所代表的实际像素值也不一样。
例如,在 iPhone 6 上,屏幕实际宽度为 375px
,则 750rpx = 375px
,1rpx = 0.5px;
而在 iPhone 5 上,屏幕实际宽度为 320px
,则 750rpx = 320px
,1rpx = 0.42px
。
其实,我们并不必关心每种设备屏幕下 1rpx
到底代表多少个像素,只要抓住「所有的设备屏幕宽度都为 750rpx
”」这个原则,就能很好地实现对任意设备屏幕大小的自适应布局。
知晓程序(微信号 zxcx0101)强烈建议用 iPhone 6 作为视觉稿的标准,即将视觉稿总宽度设成 750px。这样,
开发者就能很方便地对相关的尺寸进行量取。
比如,在总宽度为 750px
的 iPhone 6 视觉稿中,量取一个图片的宽度为 200px
,那么,这个图片的宽度即可设置为 200rpx。
简单一句话解释:量取多少就设置多少。
flex
配合 rpx
的使用案例
现在,我们就在小程序中使用 flex
和 rpx
进行布局,体验一下这种解决方案的便利。
案例一:货架列表
来看看货架列表的效果图:
首先还是贴两段代码,以下是 WXML 的实现:
/*** index.wxml ***/ <view class="shelf-nav"> <view class="shelf-nav-item" wx:for="{{ shelfNavList }}"> <navigator url="../list/list?id={{ item.id }}"> <image src="{{ item.cover_image }}" class="shelf-nav-item__image"> </image> <text>{{ item.name }}</text> </navigator> </view> </view>
然后 WXSS 的代码如下,我们在关键代码处已经给出简要注释:
/*** index.wxss ***/ .shelf-nav { display: flex; //设置 display: flex; 将它变为 flex 布局的元素 flex-wrap: wrap; //当子元素总宽度超过父元素宽度时换行显示 padding: 30rpx; } .shelf-nav-item { width: 25%; //因为每行显示 4 个货架,所以宽度设置为 25%; margin-bottom: 20rpx; text-align: center; //让它中间的图片和标题居中显示 } .shelf-nav-item__image { width: 130rpx; //在视觉稿中量取图片宽高为 130px height: 130rpx; //于是设置 width 和 height 都设置为 130rpx; border-radius: 50%; //把图片设置成圆形 border: 1px solid #d9d9d9; //加上外边框 }
简单几步就完成了货架列表的布局,并且完美兼容各种大小的设备屏幕。
案例二:货架分类标题
再来一个例子,看一下商品列表货架分类的标题:
如上图所示,货架标题居左,「查看更多」的图标居右并且垂直居中。
代码结构如下:
/*** index.wxml ***/ <view class="shelf-header"> <view class="shelf-title"> <text class="shelf-title-en">{{ shelf.english_name }}</text> <text class="shelf-title-cn">{{ shelf.name }}</text> </view> <view class="shelf-more"> <navigator url="../list/list?id={{ shelf.id }}" class="ifanrin-more-icon ifanrin"> </navigator> </view> </view>
有经验的同学一眼就可以看出,要实现需求需要:
- 让 .shelf-title 向左浮动
- 让 .shelf-more 水平方向右对齐、垂直方向居中
- 最后还要给 .shelf-header clearfix 一下
那现在来看看 flex
是怎么做的:
/*** index.wxss ***/ .shelf-header { display: flex; //设置为 flex 布局的元素 justify-content: space-between; //均匀排列每个元素, //首、末两元素分别位于起点和终点 } .shelf-more { align-self: center; //设置居中 }
只要区区几行代码,只要区区几行代码,就能轻松使用 flex
调整排版。
接下来,复习上一期的内容,发起一个请求获取数据,然后 setData()
绑定数据:
/*** index.js ***/ Page(){ ..., onLoad: function () { var that = this; wx.request({ url: CONFIG.API_URL.SHELF_QUERY, method: 'GET', data: { img_size: 'small' }, success: function (res) { that.setData({ shelfNavList: res.data.objects }); } }); }, ... }
货架列表就完成了。
template
模板的使用
我们再来看看,首页的分类列表和货架分类列表页两个页面的对比:
不难发现,这两个页面的列表的样式是一模一样的。
那么,我们就可以把每个商品视为一个模块,暂且把这个商品模块称为 product-card
,我们可以将它用 template
封装起来,在需要的地方就将它引入并进行调用。
这里先要弄清楚一个概念,template
的主要功能更多的是在于定义一个 wxml
的代码片段,然后在不同的地方调用。
template
拥有自己的作用域,只能使用 data
传入的数据。
我们来看下 template
到底如何使用。
定义 template
模板
为了方便代码组织,我们在 templates
目录下,新建一个 productCard
文件夹,并在 product-card
文件夹下新建 productCard.wxml
和 productCard.wxss
文件。
代码如下:
/*** productCard.wxml ***/ <template name="productCard"> <view class="product-card" > <navigator url="../detail/detail?id={{ id }}"> <view style="background-image: url({{ cover_image }})" class="product-cover"> </view> <view> <text class="product-title">{{ title }}</text> <text class="product-price">¥{{ price }}</text> </view> </navigator> </view> </template>
使用 name 属性,定义模板的名字,然后将代码片断保存在 template 中。
引入 template
模板
以首页为例,当要使用到 productCard
模板时,我们只需要使用 import
引入模板。
在需要显示的位置,外层用 wx:for
循环渲染列表,template
为子项,使用 is
声明需要的使用的模板,用 data
传入数据:
/*** index.wxml ***/ <import src="../../templates/productCard/productCard.wxml"/> <view class="product-list"> <block wx:for="{{ productNewList }}" <template is="productCard" data="{{ ...item }}"/> </block> </view>
留意一下 data="{{ ...item }}
的写法,item
是 wx:for
中代表数组当前项的默认变量名,item
前面的 … 操作符相当于 ES6
中的展开运算符,可用于需要解构赋值的地方,没有了解过展开运算符和解构 (Destructuring) 的同学可以先了解一下它们的基本概念。
通过解构,template
中就可以直接写成 {{ id }}
, {{ cover_image }}
,而不用写 {{ item.id }}
, {{ item.cover_image }}
。
它的意义在于实现了 template
与 wx:for-item
之间的解耦,比如这里设置了 wx:for-item="product"
,我们只要设改变 data="{{ ...product }}
就可以了。
如果数据没有通过解构,就要将 template
的 {{ item.id }}
修改成 {{ product.id }}
,很不方便。
接着,是 productCard.wxss
的引入,先在 productCard
写好样式,这里就不贴代码了。
模板的 WXSS 文件如何引入
首先请思考一下,在哪里可以引入 WXSS 文件?
一种方法是在用到 productCard
模板的页面里引入,在这里是在 list.wxss
中 import
进来。
另一种方法是,直接在 app.wxss
中引入。相比较于上一种方法,这个方法只需要一次引入,而所有用到 productCard
模板的页面都不用再去引入 productCard.wxss
了。
/*** app.wxss ***/ @import "./templates/productCard/productCard.wxss";
获取商品列表数据,渲染视图
先通过 onLoad 的 options 取得货架 id:
/*** list.js ***/ onLoad: function (options) { var id = options.id; this.setData({ shelfId: id }); }
最后,调用 wx:request()
获取商品列表数据,通过 setData()
设置 productNewList
,即可在视图层渲染出完整的列表。
/*** list.js ***/ onLoad: function (options) { ... wx.request({ url: CONFIG.API_URL.PRODUCT_LIST, method: 'GET', data: { shelf__id: this.data.shelfId }, success: function (res) { if (res.status == 200) { that.setData({ productNewList: res.data.objects }); } } }); ... }
到这里,一个像样的列表页面就做好了。但如上面的代码所示,现在小程序会一次性将所有商品列表查询并渲染至页面中。
现实中,这种做法显然是不科学的。我们还需要一个「加载更多」的功能。
这个功能要求我们做到:用户访问时,页面首次加载 20 个商品,点击列表底部的「查看更多」按钮可再多加载 10 个商品。
具体如何实现呢?请继续关注下一期的内容。
本文作者许诺会在 「知晓程序 × 开发交流」微信群中和大家交流小程序开发经验。
添加「程小序」个人号(扫描以下二维码),好友验证信息填写入群暗号「开发」即可入群。
回复「产品」、「运营」或「设计」等暗号,也可以加入有关于小程序产品、运营和设计的群聊中,一同探讨小程序的一切。
本文由知晓程序原创出品,关注微信号 zxcx0101,回复「电商」获得电商类小程序的实战指南。
快速关注知晓程序↓↓↓
知晓程序 ( 微信号 zxcx0101)是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯 ( 消息、观点、指南、活动)和服务,在这里你能了解到关于小程序的一切。