小程序学习笔记（三）视图容器

准备工作

1. 新建view页面（4个文件都包含，并修改导航栏标题文字为“视图容器”）；
2. 新建app.wxss公共样式表；
3. 修改tabBar“我的”路径指向view页面；

创建公共样式

因为后面都是学习各个组件的使用，页面结构基本保持一致，一个view包裹着标题+组件内容。因此这里创建公共样式，代码如下：

.section{
    margin: 20px 0; 
}
.section-title{
    margin-bottom: 10px;
    font-weight: bold;
}

view视图容器的两种排列布局

20-29-17.jpg

行布局row

    flex-direction:row
     /*通过flex-direction：row 样式控制*/
    
        1
        2
        3
    

列布局column

    flex-direction:column
    /*改变row为column*/
    
        1
        2
        3
    

样式

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

21-01-29.jpg

竖向滚动

注意：为了让代码更加简洁，往后文章里我去掉了标题和外包的view

样式

.scroll-view-item{
    width: 100%;
    height: 200px;
}

横向滚动

样式

.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

22-10-05.jpg

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"我们可以这样实现：

1. vertical=""
2. 通过js文件data初始化数据，vertical：false 或者 任何一个为假的表达式
3. 不写，如果默认值就是false的话（推荐）

另外也发现，对于这些默认值false的属性，如果需要改成true，直接加上去就可以，例如这样：

至于为什么，暂时还没明白。

总结一下：对于默认值false的属性，如果想要改成true，直接加上去即可，如果不需要，去掉就行