这段时间学习了微信小程序，在这做了一个商城项目，在这小结一下用到的知识点和遇到的问题。
首页效果图：
首页顶部的横向滚动：
<!-- 顶部商品分类滑动列表 -->
<scroll-view class='scroll-view scoll-view-fixed' scroll-x scroll-with-animation>
<view bindtap='setActiveIndex' class="scroll-view-item {{activeIndex==index?'active':''}}" wx:for='{{protype}}' data-index='{{index}}'>
{{item}}
</view>
</scroll-view>
注意：这里要注意的就是横向滚动要加上 scroll-x (scroll-y 就是竖向)。
图片轮播：
<view class='swiper-image'>
<swiper indicator-dots autoplay>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
注意：要加上需要的属性 indicator-dots 显示指示点 indicator-color 指示点颜色 autoplay 自动轮播
公告栏：
<!-- 公告 -->
<view class='view-adv'>
<view style='float: left;'>公告：</view>
<swiper class='swiper-adv' autoplay vertical circular>
<swiper-item>
<text>清仓大甩卖 ，全场八折</text>
</swiper-item>
<swiper-item>
<text>秋裤加绒牛仔裤，迎接冬天</text>
</swiper-item>
</swiper>
</view>
注意：加上属性 vertical 滑动方向是否为纵向
商品列表采用的是弹性盒子布局：
HTML代码
<!-- 商品列表 -->
<view class='goods-container'>
<view class='goods-item' wx:for='{{goods}}'>
<view class='goods-image'>
<image src='{{item.pic}}'></image>
</view>
<view class='goods-title'>{{item.name}}</view>
<view class='goods-price'>￥{{item.price}}</view>
</view>
</view>
CSS样式代码
/*商品列表*/
.goods-container {
padding: 15rpx;
background-color: rgb(248, 248, 248);
display: flex; /*弹性盒子模型*/
justify-content: space-between;
flex-wrap: wrap; /*换行*/
}
/*商品信息*/
.goods-item {
width: 350rpx;
height: 472rpx;
background-color: #fff;
margin-bottom: 24rpx;
box-sizing: border-box;
overflow: hidden;
}
/* 商品图片 */
.goods-image{
width:350rpx;
height:350rpx;
overflow: hidden;
}
.goods-image image{
width:350rpx;
height:350rpx;
}
/*商品名称*/
.goods-title{
width: 320rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding:15rpx 10rpx;
font-size: 13px;
}
/*价格*/
.goods-price{
color: #e02e24;
padding:0rpx 10rpx;
font-size: 13px;
}
注意：父元素定义 display: flex; //弹性盒子 flex-wrap: wrap; //换行 justify-content: space-around; //均分 左右留有距离
分类页面：
布局使用弹性盒子，左占比1，右占比2。
//父元素
.flex {
display: flex;
border-top: 1px solid #ccc;
}
//子元素1
.flexbox1 {
flex: 1;
}
//子元素2
.flexbox2 {
flex:2;
}
接下来的内容按要求写入。
滚动视图：
onLoad: function (options) {
var sysInfo = wx.getSystemInfoSync()
//获取屏幕高度，导航栏和底部工具之间的高度
var _wHeight = sysInfo.windowHeight;
//创建查询器
var query = wx.createSelectorQuery();
//查询元素
var searchBox = query.select('.goods-search-container');
var that = this;
searchBox.boundingClientRect(function (rect) {
var height = rect.height;
that.setData({
windowHeight: _wHeight, // windowHeight
leftHeight: _wHeight - height, //剩余高度
})
}).exec();
}购物车效果图：
在购物车遇到的问题，如何让元素实现左滑删除这个功能。
第一步使用bindtouchstart开始触摸事件
首先我们在data中定义俩个数据，初始值为0。代表触摸点的X轴和Y轴坐标。
通过这个事件我们可以得到手指触摸点的坐标。
第二步使用bindtouchmove开始滑动事件
首先我们需要声明俩个变量接收移动时的坐标touchMoveX和touchMoveY
通过这个事件我们可以得到时实时变化滑动的X轴和Y轴坐标
第三步获取滑动的角度
通过angle({},{})方法得到滑动的角度
个人中心效果图：
个人信息页面就是简单的布局然后引入 weui 即可。
学习总结：
1. <scroll-view></scroll-view>滚动视图组件的使用
2. <swiper></swiper>轮播组件的使用
3. 弹性盒子的使用
4. bindtouchstart 开始触摸事件的使用
5. bindtouchmove 开始滑动事件的使用
6. bindtap 点击事件的使用
7. data-自定义名称 自定义属性的使用
8. 数组find()和filter()，forEach()方法的使用
问题：
组件使用不熟练，JS里经常会出现小BUG导致出现各种情况。
不熟练的情况下还是看看相关文档，相照应下就减少小问题的出现：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html