微信小程序开发系列（八）·微信小程序页面的划分以及轮播图区域的绘制和图片的添加

1. 划分页面结构

2. 轮播图区域绘制

3. 轮播图图片添加

1. 划分页面结构

最终我们想达到如下效果：

其页面分为四层结构，因此我们需要配置四块view，代码如下：

<!-- view 小程序提供的容器组件，可以当成div使用-->

<!-- 轮播图区域 -->
<view class="swiper"></view>

<!-- 公司信息 -->
<view class="info"></view>

<!-- 商品导航 -->
<view class="good-nav"></view>

<!-- 推荐商品 -->
<view class="good-hot"></view>

将改代码导入index.waml文件中：

并将index.wxss文件内的内容删除，导入一下代码：


page{
  height: 100vh;
  background-color: #efefef !important;
}

这样我们就做出了页面的框架。

2. 轮播图区域绘制

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML、CSS 实现轮播图的结构样式,然后使用JS控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多。

在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图：

swiper：滑块视图容器，其中只能放置 swiper-item 组件。

swiper-item：只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项。

index.waml代码示例：

<!-- view 小程序提供的容器组件，可以当成div使用-->

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper：滑块视图容器，其中只能放置 swiper-item 组件 -->
  <!-- autoplay实现轮播图的自动切换 -->
  <!-- interval切换时间 -->
  <!-- indicator-dots下方小圆点 -->
  <!-- circular循环 -->
  <!-- indicator-color小圆点颜色 -->
  <!-- indicator-active-color激活小圆点颜色 -->
  <swiper 
    autoplay 
    interval="2000" 
    indicator-dots 
    circular
    indicator-color="#fff"
    indicator-active-color="#f3514f"
  >
    <!-- swiper-item： 只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项 -->
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3   
    </swiper-item>
  </swiper>
</view>

<!-- 公司信息 -->
<view class="info"></view>

<!-- 商品导航 -->
<view class="good-nav"></view>

<!-- 推荐商品 -->
<view class="good-hot"></view>

index.scss代码示例：


page{
  height: 100vh;
  background-color: #efefef !important;
}

//轮播图区域的样式
.swiper{
  swiper{
    height: 360rpx;
    background-color: skyblue;

    swiper-item{
      //&在Sass中代表的是父选择器，引用的意思
      //swiper-item:first-child
      &:first-child{
        background-color: lightsalmon;
      }
      &:first-child{
        background-color: lightseagreen;
      }
    }
  }
}

最终效果：

3. 轮播图图片添加

在小程序中，如果需要渲染图片，需要使用 image 组件，常用的属性有 4 个：

① src 属性：图片资源地址

② mode：图片裁剪、缩放的模式

③ show-menu-by-longpress: 长按图片显示菜单

④ lazy-load: 图片懒加载，在滑动到一定距离开始展示图片（上下三屏）

注意事项：

1.image 默认具有宽度和高度,宽是 320px 高度是 240px

2.image 组件不给 src 属性设置图片地址，也占据宽和高

在index.waml最下方导入如下代码：

<!-- src:图片的资源地址-->
<!-- mode:图片的裁剪和缩放模式-->
<!-- show-menu-by-longpress：长安展示菜单-->
<image 
  src="../../picture/traffic/1.png" 
  mode="aspectFit" 
  show-menu-by-longpress
  lazy-load
  />

对于show-menu-by-longpress需要我们长按图片，会弹出：

对于lazy-load，首先我们找到index.scss文件，再文件最下方加入代码：

.good-hot{
  height: 5000px;
}

可以看到图片在最开始没有加载出来：

通过不断往下滑，图片加载出来了：

以上是功能演示，下载将刚才的代码注释掉，在view中进行添加转轮图片。

此时index.waml代码：

<!-- view 小程序提供的容器组件，可以当成div使用-->

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper：滑块视图容器，其中只能放置 swiper-item 组件 -->
  <!-- autoplay实现轮播图的自动切换 -->
  <!-- interval切换时间 -->
  <!-- indicator-dots下方小圆点 -->
  <!-- circular循环 -->
  <!-- indicator-color小圆点颜色 -->
  <!-- indicator-active-color激活小圆点颜色 -->
  <swiper 
    autoplay 
    interval="2000" 
    indicator-dots 
    circular
    indicator-color="#fff"
    indicator-active-color="#f3514f"
  >
    <!-- swiper-item： 只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项 -->
    <swiper-item>
      <image 
      src="../../picture/traffic/1.png" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/2.png" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/3.png" 
      mode="" 
      />   
    </swiper-item>
  </swiper>
</view>

<!-- 公司信息 -->
<view class="info"></view>

<!-- 商品导航 -->
<view class="good-nav"></view>

<!-- 推荐商品 -->
<view class="good-hot"></view>

<!-- src:图片的资源地址-->
<!-- mode:图片的裁剪和缩放模式-->
<!-- show-menu-by-longpress：长安展示菜单-->
<!-- <image 
  src="../../picture/traffic/1.png" 
  mode="aspectFit" 
  show-menu-by-longpress
  lazy-load
  /> -->

index.scss代码：


page{
  height: 100vh;
  background-color: #efefef !important;
}

//轮播图区域的样式
.swiper{
  swiper{
    height: 360rpx;
    // background-color: skyblue;

    swiper-item{
      width: 100%;
      height: 100%;

      //&在Sass中代表的是父选择器，引用的意思
      //swiper-item:first-child
      // &:first-child{
      //   background-color: lightsalmon;
      // }
      // &:first-child{
      //   background-color: lightseagreen;
      // }
    }
  }
}