微信小程序实战篇-电商(二)

哈喽,大家好,今天总于挤出时间,写第二篇啦,自从决定写文章才发现时间都不够用啊,废话不多说,我们直接进入正题吧!
先回顾一下上篇文章,我们讲解了底部导航栏和顶部导航栏的制作,大家应该都记得把,基本上电商小程序都会带底部当导航栏,所以底部导航栏一定要会哦~,今天呐,我将教大家另一个必须会的,banner 图的制作,也叫广告轮播图,就是我们经常看到首页自动轮播的那个控件。

广告轮播图的制作


先上效果让大家过过瘾,是不是很眼熟,别急,看完这篇文章,你也可以轻松制作出这样的效果。我还是把广告轮播图写在home的页面里了,需要改动的页面有home.js、home.wxml、home.wxss

![广告轮播图.gif](http://upload-images.jianshu.io/upload_images/1750086-f42e4a4c5cb0519d.gif?imageMogr2/auto-orient/strip)

home.wxml

1
2
3
4
5
6
7
8
<!-- banner -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>

swiper 是微信自带的视图,我们直接使用就好,记住 里面一定要包含 ,你用自定义的 view 是无效的,下面介绍一下这个控件的常用属性,

  • indicator-dots 是否显示面板指示点
  • autoplay 是否自动切换
  • interval 自动切换时间间隔
  • duration 滑动动画时长

剩下的 wx:for,已经可以算老生常谈了,几乎每篇都会遇到,所以就一带而过不讲了,不懂的自己查询前面几篇文章,

home.wxss

1
2
3
4
5
6
7
8
/* 直接设置swiper属性 */
swiper {
height: 300rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}

home.js

1
2
3
4
5
6
7
8
9
10
// banner
imgUrls: [
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s

home.js 就是数据了,imgUrls、indicatorDots、autoplay、interval、duration这些个字段在 home.wxml 都有用到,不明白的看注释,已经写的很清楚了

界面布局


剩下的布局都是css的基础啦,我就放在这里统一讲,先上效果图

![效果图.png](http://upload-images.jianshu.io/upload_images/1750086-489d6701707e9e60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我们接下来要做的布局就是广告轮播图下面的**品牌馆模块布局、以及新品上架这个模块的布局**

home.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 分类导航 -->
<view class="navs">
<block wx:for-items="{{navItems}}" wx:key="name">
<view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
<image src="{{item.imageurl}}" class="nav-image" />
<text>{{item.name}}</text>
</view>
</block>
</view>

<view class="separate"></view>

<view class="cate-container">

<view class="category-title">
<text class="name">新品上架</text>
<view class="line_flag"></view>
<image class="head-img" src="{{newgoods_head_url}}"></image>
</view>

<scroll-view scroll-x="true">
<view class="goods">
<block wx:for-items="{{goodsItems}}" wx:key="name">
<view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
<image src="{{item.imageurl}}" class="goods-image" />
<text>{{item.name}}</text>
<p>{{item.newprice}}</p>
</view>
</block>
</view>
</scroll-view>
</view>
![代码图片.png](http://upload-images.jianshu.io/upload_images/1750086-d1683f2bbfe01c16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其实代码已经有注释了,我用带有颜色的框区分,是为了读者更好的理解,第一个红框是 banner,这个上面讲过了,跳过,第二个红框分类导航,view 层包含一个 for 循环的 block 模块,每个模块里有一个 image 控件和 text 控件,对比效果图,对应的就是品牌馆、类目等数据,这里我再从新教一遍如何看懂这些代码,拿分类导航来说
  • 第一行这么写,class字段意思是给这个view定义了名叫 navs 的样式,那navs样式在哪里呐,在对应名下的.wxss 样式里,所以我们要去 home.wxss 去找navs ,
  • data-xxx,xxx就是你给home.js里提供的数据关键词,home.js通过获取xxx关键词来获取xxx里面的数据,回调数据的时候会用的到
  • image src src很容易理解了,是填图片路径,要求这个图片路径要正确,就是必须可以读取的到,不然会报异常

回顾到此结束,接着看最后一个红框,红框中的第二个绿框,新控件
scroll-view 看单纯就知道他的作用,滚动的视图嘛,就是scroll-view里面包含了很多view 当超过屏幕的时候,你可以滚动查看被遮盖的view ,看一下scroll-view的属性

  • scroll-x 允许横向滚动
  • scroll-y 允许纵向滚动
  • scroll-top 设置竖向滚动条位置
  • scroll-left 设置横向滚动条位置
  • bindscrolltoupper 滚动到顶部/左边,会触发 scrolltoupper 事件
  • bindscrolltolower 滚动到底部/右边,会触发 scrolltolower 事件
  • enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
  • scroll-with-animation 在设置滚动条位置时使用动画过渡

我实现的是横向滚动,所以把scroll-x设置为true就好,大家可以试一下其他属性,多试试,看效果才能理解每个属性的效果

home.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*=================品牌馆、类目 的样式====================*/

.navs {
display: flex;
}

.nav-item {
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
padding: 20rpx;
}

.nav-item .nav-image {
width: 80rpx;
height: 80rpx;
/*border-radius: 50%;设置边界圆角*/
}

.nav-item text {
padding-top: 20rpx;
font-size: 25rpx;
}

/*=================新品上架 样式====================*/

.category-title {
display: flex;
flex-direction: column;
margin-top: 15rpx;
margin-bottom: 0rpx;
}

.category-title .name {
font-size: 40rpx;
text-align: center;
margin: 10rpx auto;
}

.line_flag {
width: 80rpx;
height: 1rpx;
display: inline-block;
margin: 20rpx auto;
background-color: gainsboro;
text-align: center;
}

.line {
width: 100%;
height: 2rpx;
display: inline-block;
margin: 20rpx 0rpx;
background-color: gainsboro;
text-align: center;
}

image.head-img {
width: 100%;
height: 270rpx;
}

text {
color: #444;
font-size: 40rpx;
}

p{
color: red;
font-size: 30rpx;
margin-top: 20rpx;
}

.cate-container {
color: #fff;
}

/* 分割线 */
.separate {
height: 15rpx;
background-color: #f2f2f2;
}

刚刚我们在 home.wxml 中提到的navs、nav-item都在这里,display、flex-directio等对应的样式在 微信小程序入门篇(二)wxss样式积累模块里都有记录,不明白属性作用的可以跳过去查阅一下,这个是基本功,不是什么技巧,只能死记硬背。

home.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
data: {
navbar: ['护肤', '彩妆', '香水', '个人护理'],
currentTab: 0,
// banner
imgUrls: [
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',
'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s

hot_products:
[
{
product_id: 1,
imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161222/148237182618.png',
html: "http://mz.djmall.xmisp.cn/files/activity/20161216/5853a0137573e84/mz2_ajax/index.html"
},
{
product_id: 2,
imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161202/148066038440.png',
html: "http://mz.djmall.xmisp.cn/files/activity/20161208/584926f0017d874/mz1/index.html"
}
],

// navItems
navItems: [
{
typeId: 0,
name: '品牌馆',
url: 'bill',
imageurl: '../../images/navItems/home_icon_brand.png',
},
{
typeId: 1,
name: '类目',
url: 'bill',
imageurl: '../../images/navItems/home_icon_sort.png',
},
{
typeId: 2,
name: '特惠专场',
url: 'bill',
imageurl: '../../images/navItems/home_icon_gift.png'
},
{
typeId: 3,
name: '推荐好友',
url: 'bill',
imageurl: '../../images/navItems/home_icon_frends.png'
}
],

// 新品上架
goodsItems: [
{
goodId: 0,
name: '兰蔻小黑瓶',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057921620.jpg',
newprice: "¥200.00",
oldprice: "¥300.00",
},
{
goodId: 1,
name: '兰蔻清莹柔肤爽肤水',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
newprice: "¥120.00",
oldprice: "¥200.00",
},
{
goodId: 2,
name: '倩碧水嫩保湿精华面霜',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
newprice: "¥320.00",
oldprice: "¥400.00",
},
{
goodId: 3,
name: '特效润肤露',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
},
{
goodId: 4,
name: '倩碧焕妍活力精华露',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
}, {
goodId: 5,
name: '日本资生堂洗颜',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
}
],

newgoods_head_url:"http://mz.djmall.xmisp.cn/files/banner/20161202/148066062976.jpg",

// 新品上架
recommends: [

{
goodId: 7,
name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
newprice: "¥36.60",
oldprice: "¥40.00",
},
{
goodId: 10,
name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
}, {
goodId: 11,
name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
},
{
goodId: 12,
name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
newprice: "¥239.00",
oldprice: "¥320.00",
},
{
goodId: 13,
name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
newprice: "¥130.00",
oldprice: "¥180.00",
},
],
}

home.js 已经多次强调这个是用来放数据和处理事件监听的,事件监听先跳过,后面会专门出一篇来讲解,数据目前也是模拟的数据,还没有涉及到网络请求,我要强调的是,所有的模拟数据一定要放在page下面的data里,代码君就犯过错,写在data括号的外边,程序就一直报错,招了好半天,才发现是这么低级的错误,所以我踩过的坑已经提醒你们了,不要继续掉坑里哦~

总结


好了,如果你照着我的代码敲的话,应该可以实现这些布局效果,代码君想告诉大家的是,一定要动手实践,只有实践你才会发现你哪里是真的理解了,哪里不会,相信我,实践后你会对程序的理解更透彻。好了,今天就讲解到这里,住大家周末愉快,最后放一张这几天我带领大家实现的代码效果图。

![微信商城.gif](http://upload-images.jianshu.io/upload_images/1750086-56ab749f16a78247.gif?imageMogr2/auto-orient/strip)

1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。