这段时间学习了微信小程序，在这做了一个商城项目，在这小结一下用到的知识点和遇到的问题。先来看看整体的效果：
首页底部的tabBar：
"tabBar": {
"color": "#000000", //默认的颜色
"selectedColor": "red", //选中时候的颜色
"backgroundColor": "#fff", //tab 的背景色
"borderStyle": "black", //tabbar上边框的颜色， 仅支持 black / white
"position": "bottom", //定位在底部 仅支持 bottom / top
"list": [ //跳转的列表 最少2个 最多5个
{
"pagePath": "pages/index/index", //路径
"text": "首页", // tab 上按钮文字
"iconPath": "/images/nav/home-off.png", //图片路径
"selectedIconPath": "/images/nav/home-on.png" //选中时的图片路径
},
{
"pagePath": "pages/classify/classify",
"text": "分类",
"iconPath": "/images/nav/search-off.png",
"selectedIconPath": "/images/nav/search-on.png"
},
{
"pagePath": "pages/shopping/shopping",
"text": "购物车",
"iconPath": "/images/nav/cart-off.png",
"selectedIconPath": "/images/nav/cart-on.png"
},
{
"pagePath": "pages/mymessage/mymessage",
"text": "我的",
"iconPath": "/images/nav/my-off.png",
"selectedIconPath": "/images/nav/my-on.png"
}
]
}
底部tabBar相关信息如上，注释都写了
首页：
首页的头部是一个滚动视图 :
<scroll-view class='scrollbox' scroll-x="true" scroll-with-animation="true">
<view class='box select{{selectindex==index?"index":""}}' wx:for="{{category}}"
wx:key="{{item.id}}" data-index="{{index}}" bindtap='setindex'>{{item.name}}</view>
</scroll-view>
注意：只有加上scroll-x="true" 才能横向滚动，其次就是给滚动视图这个容器里的元素设置不换行 white-space: nowrap; 剩下的内容就自己定义了。
然后是一个轮播组件：
<view>
<swiper indicator-dots indicator-color indicator-active-color autoplay interval="3000" circular>
<swiper-item wx:for="{{arrayimg}}" wx:key="{{item.id}}">
<image src="{{item.src}}" style='width:100%;height:100%;'></image>
</swiper-item>
</swiper>
</view>
注意：要加上需要的属性 indicator-dots 显示指示点 indicator-color指示点颜色 indicator-active-color指示点选中的颜色 autoplay自动轮播 interval切换的时间 circular是否采用衔接滑动
公告部分也是一个轮播组件：
<view class='info'>
<view class='infobox1'>公告：</view>
<view>
<swiper autoplay interval="3500" circular vertical class='infobox2'>
<swiper-item wx:for="{{arrayinfo}}" wx:key="{{item.id}}">
<text style='color:red;'>{{item.info}}</text>
</swiper-item>
</swiper>
</view>
</view>
注意：加上属性vertical 滑动方向是否为纵向
热销商品也是一个滚动视图<scroll-view></scroll-view>这里就不一一介绍了。
热销下面的滚动进度条使用的是滚动视图<scroll-view></scroll-view>里的滚动事件bindscroll可以得到我们滚动的距离直接赋值给进度条的左外边距就可以了。代码如下：
HTML代码：
<view class='progress'>
<view class='progressbox' style='margin-left:{{marginleft}}px'></view>
</view>
css代码：
/* 滚动进度条 */
.progress{
width: 50%;
border: 2px solid transparent;
margin: 0px auto;
border-radius: 5px;
background: #ddd;
}
.progressbox{
width: 50%;
margin: 0px auto;
border-radius: 5px;
border: 2px solid transparent;
background: red;
}
js代码：
//滚动触发的方法
scrollright(e){
this.setData({
marginleft: e.detail.scrollLeft //滚动的距离赋值给外边距
})
},商品列表部分使用的是弹性盒子布局：
html代码
<!-- 商品列表 -->
<view class='goods'>
<view class='goodsbox' wx:for="{{allgoos}}" wx:key="{{item.id}}">
<view>
<image src='{{item.src}}'></image>
</view>
<view class='goodsinfo'>{{item.info}}</view>
<view class='goodsprice'>￥{{item.price}}</view>
</view>
</view>
css代码
/* 商品列表 */
.goods{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background: #EEEEEE;
padding: 5px;
margin-top: 10px;
}
.goodsbox{
width: 50%;
flex: 1;
border: 1px solid #EEEEEE;
background: #fff;
margin: 2px;
}
.goods image{
display: block;
margin: 0px auto;
width: 160px;
height: 160px;
}
.goodsinfo{
/* 下面4行代码是超出部分显示点点 */
width:150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left:10px;
color: #555555;
}
.goodsprice{
padding-left:10px;
color: red;
}注意：父元素定义
display: flex; //弹性盒子
flex-wrap: wrap; //换行
justify-content: space-around; //均分 左右留有距离
子元素
width: 50%; //宽度
flex: 1; //占比
首页基本这样就完成了。
分类页面：
分类页主要说下下面部分，首先布局用的是弹性盒子，左边占比1份，右边占比2份。
//父元素
.flex {
display: flex;
border-top: 1px solid #ccc;
}
//子元素1
.flexbox1 {
flex: 1;
}
//子元素2
.flexbox2 {
flex:2;
}
里面的内容就自己定义了。主要手下滚动视图。
滚动视图
注意：竖向滚动需要一个固定的高度，这个高度的过去需要通过获取用户手机窗口的高度减去顶部搜索框的高度再赋值给滚动视图的高度，主要使用的方法如下：
onLoad: function(options) {
var height = 0 //变量接收搜索框高度
// 获取元素的高度
wx.createSelectorQuery().select('.top').boundingClientRect((res) => {
height = res.height //得到元素的高度
}).exec();
// 获取手机信息，屏幕高度等
var than = this;
wx.getSystemInfo({
success: function(res) {
than.setData({
windowheight: res.windowHeight - height //窗体高度减去搜索框的高度
})
},
fail: function(res) {},
complete: function(res) {},
})
},
通过如上代码中的俩个微信中的api，得到顶部元素搜索框的高度，再得到用户手机窗体的高度，注意是窗体高度不是屏幕高度，再用窗体的高度减去元素的高度就是我们滚动视图的高度。
至于点击改变样式是通过点击方法自定义属性得到下标，再通过三元表达式如果下标对应执行真结果（即背景变白），否则执行假结果（为空不改变样式） 代码：
HTML代码
<view class='flexbox1'>
<scroll-view scroll-y="true" class='scroll' style='height:{{windowheight}}px'>
<!-- 通过三元表达式如果下标相等为真时添加类名改变背景颜色 否则不添加 -->
<view class='scrollbox select{{selectindex==index?"box":""}}' wx:for="{{category}}"
wx:key="{{item.id}}" data-index="{{index}}" bindtap='selectgoods'>{{item.name}}</view>
</scroll-view>
</view>
css代码
/* 选中的商品分类的颜色 */
.selectbox{
background: white;
}
js代码
//选择商品分类
selectgoods(e) {
this.setData({
selectindex: e.currentTarget.dataset.index //点击赋值对应的下标
})
},
注意：selectindex在data中定义初始值0
基本分类页面需要注意的地方就这些。这次我们做的小程序项目主要就是购物车这一块比较难，重点说
购物车：
购物车页面第一个遇到的难点就是如何让元素实现左滑删除这个功能，在小程序中是没有这样的组件的需要我们自己写。
话不多说直接看代码，稍后我们一一解释。
html代码
<view>
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="{{item.id}}">
<view class="content">
这里是中间内容需要什么自己定义 {{item.title}}
</view>
<view class="del" catchtap="del" data-index="{{index}}">删除</view>
</view>
</view>
css代码
/* 左滑删除开始css样式 */
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
width: 100%;
overflow: hidden;
}
.content {
width: 100%;
line-height: 22px;
margin-right: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px;
display: flex;
position: relative;
}
.del {
background-color: orangered;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content, .touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* 左滑删除css样式结束 */
js代码
var app = getApp()
Page({
data: {
items: [
// id 编号 src 图片路径 title 商品标题 price 价格 num 数量 isTouchMove 控制滑动删除 ishow控制单选的
{
id: 1,
src: "http://47.107.35.195:8012/goods/1.jpg",
title: "御泥坊男士黑茶清爽控油矿物泥浆面膜去黑头祛痘收缩毛孔补水新品",
price: 299,
num: 1,
isTouchMove: false,
ishow: true,
}
],
startX: 0, //开始x轴坐标
startY: 0, //开始y轴坐标
},
onLoad() {
},
//手指触摸动作开始 记录起点X坐标
touchstart(e) {
//开始触摸时 重置所有删除
this.data.items.forEach((v, i)=> {
if (v.isTouchMove) //只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX, //得到触摸时x轴的坐标
startY: e.changedTouches[0].clientY, //得到触摸时y轴的坐标
items: this.data.items
})
},
//滑动事件处理
touchmove(e) {
var that = this,
index = e.currentTarget.dataset.index, //当前索引得到下标
startX = that.data.startX, //开始X坐标
startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度
angle = that.angle({
X: startX,
Y: startY
}, {
X: touchMoveX,
Y: touchMoveY
});
that.data.items.forEach((v, i)=> {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
items: that.data.items
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del(e) {
this.data.items.splice(e.currentTarget.dataset.index, 1)
this.setData({
items: this.data.items,
})
}
})这样我们的滑动删除效果就做好了，现在我们来说下整体实现的一个思路。布局整体就是外层一个大容器内层俩个子元素，一个子元素是定义内容的，另一个子元素就是删除，中间的内容自定义。布局样式我们就不多说了，需要什么样的布局自己定义。
第一步使用bindtouchstart开始触摸事件
首先我们在data中定义俩个数据，初始值为0。代表触摸点的X轴和Y轴坐标。
通过这个事件我们可以得到手指触摸点的坐标。
第二步使用bindtouchmove开始滑动事件
首先我们需要声明俩个变量接收移动时的坐标touchMoveX和touchMoveY
通过这个事件我们可以得到时实时变化滑动的X轴和Y轴坐标
第三步获取滑动的角度
通过angle({},{})方法得到滑动的角度
第四步循环遍历判断左滑还是右滑
使用数组的forEach()循环把isTouchMove赋值为false 再判断滑动角度大于30度就直接返回，再判断下标是否相同相同再判断滑动的坐标是否大于触摸点的坐标 大于则代表右滑动把删除溢出处理掉 小于则左滑把删除推出来，再使用setData({})更新数据。
第五步计算滑动角度返回角度
使用angle()方法返回角度
angle(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
注意：滑动主要是通过三元表达式添加不同的样式 改变是否偏移90px
删除就比较简单了，通过自定义属性传下标回去，根据下标得到对象再使用数组的splice()的方法删除。
滑动删除做好之后就在这个基础之上布局成展示商品信息的页面。代码如下：
<view> <view class='top'> <view class='topbox1'>购物车</view> <view class='topbox2'>数量:{{sumnumber}}件</view> </view> <!-- 购物提示 --> <view class='hint' wx:if="{{hintshow}}">亲,您还没有购买商品哟！</view> <!-- 购物信息 --> <view> <!-- 左滑删除 --> <view> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="{{item.id}}"> <view class="content"> <view class="weui-cell__hd weui-check__hd_in-checkbox icon" bindtap='clickisshow' data-index="{{index}}"> <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{item.ishow}}"></icon> <icon class="weui-icon-checkbox_success" type="success" size="23" wx:else></icon> </view> <view bindtap='clickisshow' data-index="{{index}}"> <image src='{{item.src}}' class='imgs'></image> </view> <view class='goodsinfo'> <view class='goodstitle'>{{item.title}}</view> <view class='goodsprice'>￥{{item.price}}</view> </view> <view class='goodnum'> <view class='minusnum' catchtap='minusnum' data-index="{{index}}">-</view> <view> <input type='number' value='{{item.num}}' disabled='true'></input> </view> <view class='addnum' catchtap='addnum' data-index="{{index}}">+</view> </view> </view> <view class="del" catchtap="del" data-index="{{index}}">删除</view> </view> </view> </view> <!-- 空盒子 --> <view style='height:50px;'></view> <!-- 结算 --> <view class='account'> <view class='accountbox1'> <view class="weui-cell__hd weui-check__hd_in-checkbox icon" bindtap='clickisshow2'> <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{ishow}}"></icon> <icon class="weui-icon-checkbox_success" type="success" size="23" wx:else></icon> <text>全选</text> </view> </view> <view class='accountbox3'>合计:￥{{SumMoney}}</view> <view class='accountbox4'> <button disabled='{{disshow}}' type='warn' bindtap='bill'>去结算</button> </view> </view>
</view>上面就是整个购物车页面的布局代码。
css代码：
/* 头部开始 */
.top {
display: flex;
padding: 10px;
background: #efefef;
color: #555;
}
.topbox1 {
flex: 1;
}
.topbox2 {
flex: 1;
text-align: right;
}
/* 提示信息 */
.hint {
text-align: center;
color: #555;
}
/* 商品信息开始 */
/* 左滑删除开始css样式 */
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
width: 100%;
overflow: hidden;
}
.content {
width: 100%;
line-height: 22px;
margin-right: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px;
display: flex;
position: relative;
}
.del {
background-color: orangered;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content, .touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* 左滑删除css样式结束 */
/* 图片 */
.imgs {
width: 100px;
height: 100px;
}
/* 单选图标居中 */
.icon {
margin: auto 0px;
}
/* 商品信息 */
.goodsinfo {
padding: 15px 0px 0px 10px;
}
.goodstitle {
/* 内容溢出处理变点点 */
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #555;
}
.goodsprice {
padding-top: 30px;
color: red;
}
.goodnum {
display: flex;
position: absolute;
right: 10%;
bottom: 15%;
}
.minusnum, .addnum {
width: 52rpx;
height: 52rpx;
text-align: center;
line-height: 52rpx;
border: 1px solid #ccc;
background: #efefef;
}
.minusnum {
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.addnum {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.goodnum input {
border: 1px solid #ccc;
width: 60rpx;
text-align: center;
}
/* 结算 */
.account {
width: 100%;
height: 90rpx;
background: #efefef;
position: fixed;
bottom: 0px;
}
.accountbox1 {
padding: 20rpx 0rpx;
float: left;
width: 30%;
}
.accountbox3 {
line-height: 50px;
color: red;
float: left;
width: 40%;
}
.accountbox4 {
text-align: center;
font-size: 20px;
line-height: 50px;
float: left;
width: 30%;
}
.accountbox4 button {
color: white;
}
js代码：
var app = getApp()Page({ data: { items: [ // id 编号 src 图片路径 title 商品标题 price 价格 num 数量 isTouchMove 控制滑动删除 ishow控制单选的 { id: 1, src: "http://47.107.35.195:8012/goods/1.jpg", title: "御泥坊男士黑茶清爽控油矿物泥浆面膜去黑头祛痘收缩毛孔补水新品", price: 299, num: 1, isTouchMove: false, ishow: true, }, { id: 2, src: "http://47.107.35.195:8012/goods/2.jpg", title: "台湾欣兰黑里透白冻膜225g竹炭清洁收缩毛孔温和去黑白头面膜", price: 169, num: 1, isTouchMove: false, ishow: true, }, { id: 3, src: "http://47.107.35.195:8012/goods/3.jpg", title: "SHERO CHING", price: 258, num: 1, isTouchMove: false, ishow: true, }, { id: 4, src: "http://47.107.35.195:8012/goods/4.jpg", title: "JS-sdsosodsd", price: 145, num: 1, isTouchMove: false, ishow: true, }, { id: 5, src: "http://47.107.35.195:8012/goods/5.jpg", title: "【两瓶420】【欣欣】佑珍提拉面膜紧致改善细纹抬头法令纹去黄", price: 165, num: 1, isTouchMove: false, ishow: true, } ], startX: 0, //开始x轴坐标 startY: 0, //开始y轴坐标 ishow: true, //全选图标 sumnumber: 0, //总数量 SumMoney: 0, //总金额 hintshow: false, //提示信息 disshow:true //按钮禁用 }, // 单选图标隐藏显示 clickisshow(e) { var index = e.currentTarget.dataset.index; //获取下标 this.data.items[index].ishow = !this.data.items[index].ishow //根据下标把图标隐藏显示取反 var obj = this.data.items.find(arr => arr.ishow == true) //利用数组的find查找对象里ishow的值有没有为true的 如果找到有obj则为true即没有勾选的 if (obj) { //如果单选有没有勾选的 this.data.ishow = true //则给全选也不勾选 } else { this.data.ishow = false //否则就给多选勾选上 } this.sumcount() //调用总计算方法 this.disabledshow() //调用结算是否禁用的方法 //更新数据 this.setData({ items: this.data.items, //改变后再重新渲染 ishow: this.data.ishow }) }, //全选 clickisshow2() { if (this.data.ishow) { //如果为true就进来执行 全选是否选上 下面更新数据时自己判断即每次点击更新都取上一次的相反 this.data.items.forEach((obj, index)=> { //则循环把单选全部选上 obj.ishow = false //即勾选图标显示出来 使用的是 wx:if 为true是不勾选的图标显示 为false勾选的图标显示 }) } else { this.data.items.forEach((obj, index)=> { //否则相反 obj.ishow = true }) } this.sumcount() //调用总计算方法 this.disabledshow() //调用结算是否禁用的方法 //更新数据 this.setData({ ishow: !this.data.ishow, //全选自己判断取反 items: this.data.items //数组重新渲染 })
}, // 商品数量递增 addnum(e) { var index = e.currentTarget.dataset.index; //获取下标 this.data.items[index].num++; this.sumcount() //调用总计算方法 this.setData({ items: this.data.items }) }, // 数量递减 minusnum(e) { var index = e.currentTarget.dataset.index; //获取下标 if (this.data.items[index].num > 1) { this.data.items[index].num--; //通过下标找到对应对象里的数量-- this.sumcount() //调用总计算方法 this.setData({ items: this.data.items }) }
}, //总计算 数量 金额 sumcount(){ var sum = 0; // 总数量 var summoney = 0; //总金额 this.data.items.forEach((obj, index)=> { if (obj.ishow == false) { //选中的才计算 sum += obj.num //数组的forEach循环计算总数量 summoney += obj.price * obj.num //数组的forEach循环计算总数量 } }) this.setData({ SumMoney: summoney.toFixed(2), sumnumber: sum, }) }, // 判断是否有金额判断按钮禁用 disabledshow(){ if(this.data.SumMoney!=0){ this.data.disshow=false //有金额取消禁用 }else{ this.data.disshow = true //没有金额禁用 } this.setData({ disshow:this.data.disshow }) }, // 结算 bill(){ this.data.items=this.data.items.filter(obj=>obj.ishow==true) this.sumcount() //调用总计算的方法 if (this.data.items.length == 0) { //如果商品全部删除 this.data.hintshow = true //提示信息出现 this.data.ishow = true } this.disabledshow() //调用禁用的方法 this.setData({ items: this.data.items, hintshow: this.data.hintshow, ishow: this.data.ishow, }) }, onLoad() { this.sumcount() //调用总计算方法 this.disabledshow() //调用结算是否禁用的方法 this.bill() //调用结算 }, //手指触摸动作开始 记录起点X坐标 touchstart(e) { //开始触摸时 重置所有删除 this.data.items.forEach((v, i)=> { if (v.isTouchMove) //只操作为true的 v.isTouchMove = false; }) this.setData({ startX: e.changedTouches[0].clientX, //得到触摸时x轴的坐标 startY: e.changedTouches[0].clientY, //得到触摸时y轴的坐标 items: this.data.items }) }, //滑动事件处理 touchmove(e) { var that = this, index = e.currentTarget.dataset.index, //当前索引得到下标 startX = that.data.startX, //开始X坐标 startY = that.data.startY, //开始Y坐标 touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标 touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标 //获取滑动角度 angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); that.data.items.forEach((v, i)=> { v.isTouchMove = false //滑动超过30度角 return if (Math.abs(angle) > 30) return; if (i == index) { if (touchMoveX > startX) //右滑 v.isTouchMove = false else //左滑 v.isTouchMove = true } }) //更新数据 that.setData({ items: that.data.items }) }, /** * 计算滑动角度 * @param {Object} start 起点坐标 * @param {Object} end 终点坐标 */ angle(start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y //返回角度 /Math.atan()返回数字的反正切值 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); }, //删除事件 del(e) { this.data.items.splice(e.currentTarget.dataset.index, 1) var obj = this.data.items.find(arr => arr.ishow == true) //利用数组的find查找对象里ishow的值有没有为true的 如果找到有obj则为true即没有勾选的 if (obj) { //如果单选有没有勾选的 this.data.ishow = true //则给全选也不勾选 } else { this.data.ishow = false //否则就给多选勾选上 } if (this.data.items.length == 0) { //如果商品全部删除 this.data.hintshow = true //提示信息出现 this.data.ishow=true } this.sumcount() //调用总计算方法 this.disabledshow() //调用结算是否禁用的方法 this.setData({ items: this.data.items, hintshow: this.data.hintshow, ishow:this.data.ishow }) }})上面整个购物车页面就完成了。相关的逻辑处理和代码注释都有这里就不一一解释了。
个人信息页面
个人信息页面没什么好说的，只是简单的页面布局。
总结知识点：
1. <scroll-view></scroll-view>滚动视图组件的使用
2. <swiper></swiper>轮播组件的使用
3. 弹性盒子的使用
4. wx.createSelectorQuery().select('.top').boundingClientRect((res) => { console.log(res)}).exec(); api的使用 获取元素信息
4. wx.getSystemInfo({success: function(res) {},fail: function(res) {},complete: function(res) {},}) api的使用 获取用户手机窗体高度
5. bindtouchstart 开始触摸事件的使用
6. bindtouchmove 开始滑动事件的使用
7. bindtap 点击事件的使用
8. data-自定义名称 自定义属性的使用
9. 数组find()和filter()，forEach()方法的使用
10. wx.navigateTo({url: '路径',success: function(res) {},fail: function(res) {},complete: function(res) {},}) 跳转页面的方法
遇到的问题
1. 小程序组件的不熟悉，相关属性不熟练
2. 相关的js逻辑处理，代码执行的先后顺序
以上就是这次对这次项目的小结，最后附上小程序官网：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
以上纯属个人观点，如有错误欢迎指正。