上次小程序（3）

        本次的记录主要内容是关于scroll-view的使用（滑动的列块），以及整合前面的知识一起做的复习部分。

        因为目前主要部分还是wxml和wxss，所以使用起来可能还没有上逻辑难度。

WXML: 

<!--pages/scroll-view/scroll-view.wxml-->

<view class="view">
    <text class="text">scroll-view</text>
</view>

<scroll-view scroll-x scroll-left="45px">
    <view class="outLook">
        <view class="scrollView">            
            <navigator url="/pages/Navi_pack/1/1">
                <image src="/pictures/完成.png" class="scrollView"></image>
            </navigator>
        </view>
        <view class="scrollView">
            <navigator url="/pages/Navi_pack/2/2">
                <image src="/pictures/健康.png" class="scrollView"></image>
            </navigator>
        </view>
        <view class="scrollView">            
            <navigator url="/pages/Navi_pack/3/3">
                <image src="/pictures/流量.png" class="scrollView"></image>
            </navigator>
        </view>
        <view class="scrollView">
            <navigator url="/pages/Navi_pack/4/4">
                <image src="/pictures/用户.png" class="scrollView"></image>
            </navigator>
        </view>
        <view class="scrollView">
            <navigator url="/pages/Navi_pack/5/5">
                <image src="/pictures/中枢.png" class="scrollView"></image>
            </navigator>
        </view>
    </view>
</scroll-view>
<!-- scroll-view 滚动视图 
    1.要横向滚动需要在 scroll-view 的后面加上 scroll-x
    2.其后若是加上了 scroll-left= 意思是偏移多少位置显示
    3.添加了image进去，另外加入了点击导航属性
-->

<scroll-view scroll-y>
    <view class="mainBoxY">
        <view class="Ybox">1</view>
        <view class="Ybox">2</view>
        <view class="Ybox">3</view>
        <view class="Ybox">4</view>
        <view class="Ybox">5</view>
        <view class="Ybox">6</view>
        <view class="Ybox">7</view>
        <view class="Ybox">8</view>
    </view>
</scroll-view>

 WXSS:

/* pages/scroll-view/scroll-view.wxss */
.scrollView{
    /* 每个盒子的设置类 */
    width: 90px;height: 90px;
    margin-right:3px;
}
/* margin 是设置每个box之间的间隙*/

.outLook{
    /* （主）包含盒子的设置类 */
    border:2px solid rgb(245, 229, 12);
    display: flex;
    flex-wrap: nowrap;
    width: 500px;
}
/* 这里设置边框
    1.border: Xpx solid 是边框的粗细
    2.display 是排列方式 若是竖列排列则需要修改
    3.flex-wrap 是非换行
*/


.Ybox{
    /* 竖向排列的每个盒子的设置类 */
    width: 100%;height: 50px;background-color: rgb(80, 214, 255);
    margin-bottom:1px ;
    text-align: center;
}
.mainBoxY{
    /* 竖向排列（主）包含盒子的设置类 */
    border:2px solid greenyellow;
    flex-grow:inherit;
    height:240px;
}
.text{
    font-size: 50rpx;
    font-weight: bolder;
}

.view{
    text-align: center;
    border: 9rpx solid rgb(219, 50, 115);
    border-radius: 10rpx;
    line-height: 90rpx;
/* 从一开始就有个地方不是很清晰，就是关于排版，一直我看着都很难受
    查过知道了，原来要布置成为居中，要使用一个盒子来实现，并且用text-align来实现。
    另外关于字体：
        font-size 、 font-weight ( 字体大小、加粗 )
*/
}

结果图：

                       
  添加了导航和可点击属性

 另外，还写了竖向排列的模式

 总体：这次是复习并使用了前面的模块

同时也了解了关于字体和排版格式的部分内容

进度：