准备工作
- 新建view页面（4个文件都包含，并修改导航栏标题文字为“视图容器”）；
- 新建app.wxss公共样式表；
- 修改tabBar“我的”路径指向view页面；
创建公共样式
因为后面都是学习各个组件的使用，页面结构基本保持一致，一个view包裹着标题+组件内容。因此这里创建公共样式，代码如下：
.section{
margin: 20px 0;
}
.section-title{
margin-bottom: 10px;
font-weight: bold;
}
view视图容器的两种排列布局
行布局row
<!--横向排列view-->
<view class="section">
<view class="section-title">flex-direction:row</view>
/*通过flex-direction：row 样式控制*/
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item box-red">1</view>
<view class="flex-item box-blue">2</view>
<view class="flex-item box-green">3</view>
</view>
</view>
列布局column
<!--竖向排列view-->
<view class="section">
<view class="section-title">flex-direction:column</view>
/*改变row为column*/
<view class="flex-wrp" style="flex-direction:column;">
<view class="flex-item box-red">1</view>
<view class="flex-item box-blue">2</view>
<view class="flex-item box-green">3</view>
</view>
</view>
样式
box-red、box-blue、box-green的背景颜色大家自己补充一下，这里就不在写出来了。
.flex-item{
width: 100px;
height: 100px;
color: #fff;
}
.flex-wrp{
display: flex; /*不要忘记*/
}
动手开始做才发现自己的css水平简直不过关，布局部分好多都不知道，如果有类似情况的同学，推荐大家一个网站http://zh.learnlayout.com/，共勉吧！我先慢慢磨完小程序。
支持滚动scroll-view
竖向滚动
注意：为了让代码更加简洁，往后文章里我去掉了标题和外包的view
<!--需要给定容器一个固定高度-->
<scroll-view scroll-y="true" style="height:200px;">
<view id="red" class="scroll-view-item box-red"></view>
<view id="blue" class="scroll-view-item box-blue"></view>
<view id="green" class="scroll-view-item box-green"></view>
</scroll-view>
样式
.scroll-view-item{
width: 100%;
height: 200px;
}
横向滚动
<!--记得加white-space:nowrap; 规定不换行-->
<scroll-view scroll-x="true" style="white-space:nowrap;">
<view id="red-H" class="scroll-view-item-H box-red"></view>
<view id="blue-H" class="scroll-view-item-H box-blue"></view>
<view id="green-H" class="scroll-view-item-H box-green"></view>
</scroll-view>
样式
.scroll-view-item-H{
display: inline-block; /*不要忘记*/
width: 100%;
height: 200px;
}
其他属性
scroll-top="100" ----> 设置竖向滚动条位置
scroll-left="100" ----> 设置横向滚动条位置
scroll-into-view="blue" ----> 值为某子元素id，则默认滚动到该元素顶部
另外，还做了些有趣的尝试
- scroll-x 和 scroll-y 同时为true，支持双向滚动（需要内容宽高都超过scroll容器）；
- scroll-top 和 scroll-into-view 同时存在时，scroll-top无效，不管数值多少；
- scroll-into-view 对横向滚动无效（不知道是不是我方法的问题）
其他事件属性暂时不展开，请自行查阅官方文档
轮播swiper
<swiper indicator-dots="true" autoplay="true" current="1" interval="4000" duration="1000" vertical="true" style="height:200px;">
<swiper-item class="box-red"></swiper-item>
<swiper-item class="box-blue"></swiper-item>
<swiper-item class="box-green"></swiper-item>
</swiper>
swiper-item宽高固定为swiper的100%，相当于自动填充
属性说明
indicator-dots="true" ----> 是否显示面板指示点（默认值false）
autoplay="true" ----> 是否自动切换（默认false）
current="1" ----> 起始位置（默认0，即第一张）
interval="4000" ----> 自动切换时间间隔（默认5000，单位毫秒，即5秒）
duration="1000" ----> 滑动动画时常（默认1000，单位毫秒）
vertical="true" ----> 竖向轮播（默认false）
遗留问题
发现默认值是false的属性，如果我们写出来，例如vertical="false"，实际仍然按照true执行，结果是轮播竖向显示。其他的属性我也尝试了，包括上面的scroll-y="false", 结果仍然支持竖向滚动，大家可以试一下。
但是看微信官方demo里的代码是可以的，通过事件改变属性，false就是false，实在不清楚，先记在这里吧。
---------已解决-----------
学习下一节基础内容时，得到启发，google一下，解决了问题。
直接写在组件属性里，如vertical="false"，实际上false被当成了一个字符串来处理，非布尔值。而字符串不为空的情况下，布尔值=true，所以发生了上面遇到的情况。
** 附：javascript表达式为假的情况，除此之外其他都为真**
false、0、字符串的空''、NaN、undefined、null
因此vertical="false"我们可以这样实现：
- vertical=""
- 通过js文件data初始化数据，vertical：false 或者 任何一个为假的表达式
- 不写，如果默认值就是false的话（推荐）
另外也发现，对于这些默认值false的属性，如果需要改成true，直接加上去就可以，例如这样：
<!--直接写scroll-y，而不是scroll-y="true"-->
<scroll-view scroll-y style="height:200px;">
<view id="red" class="scroll-view-item box-red"></view>
<view id="blue" class="scroll-view-item box-blue"></view>
<view id="green" class="scroll-view-item box-green"></view>
</scroll-view>
至于为什么，暂时还没明白。
总结一下：对于默认值false的属性，如果想要改成true，直接加上去即可，如果不需要，去掉就行
