第一章：落地页可适配长度界面需要创建 page，名称就叫做 landingpage。在app.json中，添加启动页，

本小节，我们来实现一下落地页可适配长度的滚动界面。

需要创建 page，名称就叫做 landingpage。
在app.json中，添加启动页，输入名称，按下回车，会自动在 pages/ 路径下生成文件夹，并生成 landingpage.js，landingpage.json，landingpage.wxml，landingpage.wxss 四个文件。

{
  "pages":[
    "pages/landingpage/landingpage",
    ...
  ]
}

我习惯先写 .wxml 文件，然后在 .wxss 文件中随时调试界面样式，涉及到引用的组件，在 .json 文件中添加即可。界面逻辑写在 .js 文件中。

分析界面结构：

整体结构为纵向垂直布局，可以先设置几张图片依次平铺。

先设置 landingpage 整体样式：

<view class='main-wrap'></view>

.main-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #EEE;
}

使用 wx:for 设置一组图片，wx:key可以写成 *this

<block wx:for="{{bannerImgList}}" wx:for-index="index" wx:key="*this">
    <image class="banner" mode="widthFix" src="{{item}}" lazy-load="true" />
</block>

图片样式为：

.banner {
  width: 100%;
  height: auto;
}

这里 bannerImgList 为本地一组图片资源，在 data 中声明：

bannerImgList: [
  '../../images/landingpage1.jpg',
  '../../images/landingpage6.jpg',
  '../../images/landingpage7.jpg',
  '../../images/landingpage8.jpg',
]

这样，落地页基本就有了一个简单的界面，图片从上到下铺满屏幕。

注意这里的图片在实际项目中，需要使用CDN的下载地址，不然本地资源太多，影响小程序加载速度，而且上传小程序也有尺寸限制。

Tips:

书写 wxml 标签快捷方式：
1. 输入 view . className 回车，会自动生成 <view class="className"></view>
2. 输入 view # idName 回车，会自动生成 *<view id="idName"></view>，其他标签同理。
微信小程序，自定义组件不支持 id 选择器，所以注意在组件中要使用类选择器。
图片加载方式设置为 lazy-load 表示需要显示图片时才显示，这样做能提高界面刷新效率。