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

2016-10-04 本文已影响214人少年练剑

准备工作

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

创建公共样式

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

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

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

20-29-17.jpg

行布局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

21-01-29.jpg

竖向滚动

注意：为了让代码更加简洁，往后文章里我去掉了标题和外包的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

22-10-05.jpg

<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，直接加上去即可，如果不需要，去掉就行