首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）

4-1

经过上一章节的学习我们已经搭建了项目的整个框架，雏形已成。接下来我们只需要的往里面堆东西就可以了。

设计稿网址（14天分享有效，过期的可以找我拿）： https://lanhuapp.com/url/Airvn 密码: I4DA

分析首页设计稿

写代码一定要注意细节和结构性，拿到设计图首先分析应该怎么做，应该有哪些模块，哪些模块可以通用，一定要经过设计之后再动手去写。

从设计稿可以看出，图片是通屏的。经过与设计师沟通，而且还是轮播图，上下滑动的。上面有“HOT” 跟 “衣品圈” 两个Tab切换 。

下面是 Tabbar 标签栏，有“打卡”、“+”、“我”共 3 个标签，分别去到不同的页面。

右边有“头像”、“点赞”、“分享”。

通屏轮播图

给大家介绍两个微信小程序官方组件。

• view：视图容器，相当于div。
• swiper: 滑动视图容器。其中只可以放置swiper-item组件，常用来放轮播图。
• image：用来放图片的组件。

下面我们用这两个组件来写通屏轮播图

 # index.wxml 代码

<!--一个大盒子包住所有的元素-->
<view class="container-fill">
<!--包住 swiper 组件-->
 <view class="scroll-fullpage" style="height: 100%">
 <!--swiper组件用法，里面只能放swiper-item组件，我们项目中需要的轮播图上下滑动，所以设置 vertical="true" 代表滑动方向为纵向。-->
            <swiper circular="true" vertical="true" style="height: 100%">
            <!--放了两个 swiper-item，相当于有两个子项，滑两下 -->
            <!--第一个子项-->
                <swiper-item>
                <!--swiper-item 组件里面可以放任何的东西，我们这里放了图片-->

                <!--src代表图片的url，mode为图片的裁剪，缩放的模式，aspectFill保持纵横比缩放图片-->
                    <image mode="aspectFill"
                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590745760463&di=50d76742c6cb334acdac656a930c52e7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F27%2F20190927092410_yyrsn.thumb.400_0.jpg"
                           class="slide-image">
                    </image>
                </swiper-item>
                <!--第二个子项-->
                <swiper-item>
                    <image mode="aspectFill"
                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590747427893&di=9fa9371dfd6f8ffcd062b18eeff58ec5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2019-09-11%2F5d789c0b24214_200_300.jpg"
                           class="slide-image">
                    </image>
                </swiper-item>
            </swiper>
        </view>
</view>

代码分析大白话（注释里面也挺详细的）：

• view相当于 div ，是一个容器，不可以滑动。
• swiper是一个可以滑动的的容器，vertical = "true" 表示滑动方向为纵向，circular="true" 表示采用衔接滑动，如果不理解衔接滑动可以把这个属性先去掉，然后体验一下区别。
• swiper-item 是swiper 的滑块，如果加入滑动内容，那么就在swiper-item中添加，宽高自动设置为 100% 。
• image组件放在swiper-item 中，其中的mode属性最常用的是widthFix，表示图片宽度100%，高度自适应。我觉得有点像背景图的感觉。

上面是 wxml的代码，接下来是样式。

# index.less代码
<!--将大盒子通屏，这个方法请记住
用固定定位的方法通屏。不会出现各个机型有白边的情况

不熟悉less的同学，就去百度看一下。
其实就是层层嵌套的感觉。

其实这里的选择器,例如&#x