一般都是直接用微信提供的组件来进行布局的
在小程序中最好少用id，尽量用class
轮播图就是直接用swiper
直接在微信开发者文档里面-》组件-》swiper-》示例代码
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>①其中indicator-dots是设置轮播图上面那个点的样式 ，用true就是直接写死，也就是保留这个轮播图
②是否可以轮播通过autoplay
③interval是轮播的时间、duration是间隔的时间
下面进行测试，通过在网上找了三张图片，然后在index.js里面设置了一个imgUrls的数组，把这三张图片的链接都放进去
在index.js中data域里面
data: {
imgUrls: ['http://pic16.photophoto.cn/20100806/0005018388944073_b.jpg',
'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg',
'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg'
]
},然后就可以在index的html里面调用了，通过wx:for来遍历这个数组里面的每一个元素，最好就是添加上wx:key来指定下标index
通过给image提供item作为src链接
效果图：
但是可以看到，这边都是没在中心区域的，然后偏离的了
==所以这个时候就要对轮播图进行样式的添加，让他的位置变得正常起来即可了
.index-swiper{margin: 20rpx;}
.index-swiper image{
width: 100%;
} 通过给整个轮播图的margin进行设置，然后给轮播图里面的每一个图片都设置了宽度
效果图：
之后让这个图片更好看一点的话，就可以给这个图片设置圆角的，
搞了圆角之后会发现上面是圆角的，但是下面还是方的，这个时候一般都是因为在wxml中就给图片设置了宽度和高度，才出现这个情况，所以要把
提前设置的宽度和高度都高掉，然后还要通过wxss把这个轮播图的高度也定死了，然后把轮播图也加上圆角，和溢出隐藏
.index-swiper{margin: 5rpx 20rpx 5px;
height: 300rpx;
border-radius: 10rpx;
overflow: hidden;}
.index-swiper image{
width: 100%;
border-radius: 10rpx;
overflow: hidden;
} 效果图：
就达到了四个角都是圆角的效果了
如果是要对这个轮播图衔接滑动得话，也可以通过circular来设置得
circular="{{true}}"2、下面就是对两个 推荐 最新进行排榜了】
直接定义两个view然后放在一个大的view里面
<view class="index-tab">
<view>推荐</view>
<view>最新</view>
</view>
这种布局在wx里面一般都是直接用flex布局会好得多的
先对整个大的 定义为flex布局
之后对里面两个view的项目进行flex=1 也就是宽度自适应，=1的时候由flex布局的知识，他们就会变大，由于都等于=1
所以会把全部的空格都占满，然后占的空间也都是50%的
然后还要把里面的文字进行居中
.index-tab{
display:flex;
}
.index-tab view{
flex:;
}效果图
由于这个是选项框，也就是选择其中一个就可以看到对应的内容
所以就要加上选中的样式会变成什么样的，通过.active来添加样式（这里是给其中一个写死了）
之后再对这个padding和margin撑出来，好看点，然后再把选中的文字变成是红色的即可了
得到的效果就是：
3、之后就是对列表中的推荐或者最新用户的信息显示了
.index-list{display: flex;
flex-wrap: wrap;
/* //z自动转行} */
}
.index-list-item{width: 50%;}
.index-list-item image{
width: 90%;
height: 250rpx;
margin: 0 auto;
display: block;
}通过flex布局 ，为了抗议主动换行，就抗议用wrap
为了让每张图片都抗议居中，通过
margin: 0 auto;
display: block;
得到的效果：
把图片搞好了，还要把点赞等等信息也加上才行了
注意：在wx中text标签其实和html中的span很像，就是用于考研放一行的非块级标签
只是给了这个昵称和点赞部分进行了如下设置发现，两个部分都没在两边放着
.index-list-text{
/* 让用户昵称和点赞部分分开在两边即可了 */
display:flex;
justify-content:space-between;
}效果图：
这是因为这整个部分用的是text（文本的话就不行了，要用块级的view，并且还要给这个view设置宽度
<text class="index-list-text">
<!-- 昵称 -->
<text>小喵喵</text>
<text>
<!-- 点赞图标 -->
<text class="iconfont icondianzan"></text>
<!-- 点赞数 -->
<text>100</text>
</text>
</text>
.index-list-text{
width: 90%;
/* 让用户昵称和点赞部分分开在两边即可了 */
display:flex;
justify-content:space-between;
}才行的
效果图：
然后还发现了这个昵称【小喵喵】跑到左边去了，所以就要对这个view 中的文本text进行居中，即可
.index-list-text{
width: 90%;
/* 让用户昵称和点赞部分分开在两边即可了 */
display:flex;
margin: 0 auto;
justify-content:space-between;
}【小细节】在列表中的图片，其实是不成比例的，导致被压缩，可以在wx开发文档-》组件-》媒体组件-》image
使用下面的aspectfill 来保持横纵比缩放了