微信小程序的开发

评测小程序首页的实现

一、项目的需求
1.大大降低客户的成本
2.从上至下：幻灯片-精品推荐-热门评测
二、编码实战
1.首页分为幻灯片、精品推荐、热门评测三个部分。我们需要在index.wxml中将其分为三大类。

2.幻灯片：从微信公众平台的组件中找到swiper复制代码

因为版本的不同，遇到了一些问题。比如：幻灯片的图片加载不出来。
解决方案：将 view class=“swiper-item{{item}}”/view那一行替换成image src="{{item}}" class=“slide-image” width=“355” height=“550”/，幻灯片里面的图片就能显现出来了。

3.精品推荐
index.wxss
.header{
border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
}/* 精品推荐 /
.text-all{
color: green;
font-size: 10px;
}/ 全部精品 */
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.content-item{
height: 250rpx;
width: 45%;
background-color: goldenrod;
margin: 5px;
position: relative;
}/照片的四个框架/
.content-item image{
width: 100%;
height: 100%;
}/照片大小/
.content-item-text{
position: absolute;
bottom: 0px;
color: white;
font-size: 10px;
background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.8), rgba(0,0,0,0));
height:125rpx;
width: 98%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}/图片下方的渐变和文字/

到这步，大概的框架也就完成了，里面的细节化东西，就得看个人的需求改变了。
4.热门评测
index.wxss
.list-item{
height: 500rpx;
width: 100%;
}
.list-item-images{
height: 300rpx;
width: 100%;
position: relative;
}
.list-item-imgages-img{
height: 100%;
width: 100%;
}
.avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
bottom: -50rpx;
right: 50rpx;
}
.list-item-text{
height: 200rpx;
width: 96%;
margin-top: 20rpx;
padding-left: 2%;
padding-right: 2%;
}
.list-item-text-content{
font-size: 10px;
color: #999;
margin-top: 20rpx;
}

到此为止首页的大致框架也就完成了，里面的细节之处需要慢慢调整。