文章目录
一、swiper 轮播图1.1. swiper 基本使用1.2. 调整轮播图和图片的大小二、scroll-view 可滚动视图区域一、swiper 轮播图
轮播图是项目中最常见的功能，很多项目都会在首页中使用轮播图，我们传统的 web 项目中想使用一个较完美的轮
播图，要么手写，要么引入第三方组件，而微信小程序中，默认给我们提供了一个轮播图组件，使用起来非常方便，
本节就快速回顾一下微信小程序中轮播图的使用
1.1. swiper 基本使用
微信小程序中使用轮播图，需要<swiper>和<swiper-item>两个标签搭配使用，<swiper>为个轮播图的最外层结
构，轮播图中的每一项则需要嵌套在<swiper-item>标签内
可以通过属性对<swiper>进行控制，本文列举一些最常用的属性，想学习更多的属性，请参照 微信小程序 -
swiper 轮播图组件：
示例：使用 swiper 轮播图组件：
(1) 创建/images目录，并放入三张图片，一会用来当轮播图内容
(2) 在页面逻辑中定义数组，用来保存轮播图图片列表
Page({data: {// 轮播图图片列表swiperList: ['../../images/banner1.png','../../images/banner2.png','../../images/banner3.png']}})
(3) 在页面布局文件中，使用轮播图组件，内容为前面定义的轮播图图片列表
<!-- 自动播放、有指示点的轮播图组件 --><swiper indicator-dots="true" autoplay="true"><swiper-item wx:for="{{swiperList}}" wx:for-item="banner" wx:key="*this"><image src="{{banner}}"></image></swiper-item></swiper>
(4) 运行效果，虽然不太美观，但是轮播图的基本功能已经实现了
1.2. 调整轮播图和图片的大小
通过上面动图我们可以看到，虽然轮播图功能正常，但是样式很丑，我们需要做一些调整
(1) 修改图片宽度
轮播图组件默认的宽度是百分之百，我们应该让图片的宽度和轮播图一样，注意，微信小程序中设置图片宽度时，
要设置<image>标签的mode属性，以免图片宽度改变后，高度不能等比例缩放，重点代码在第四行
<!-- 自动播放、有指示点的轮播图组件 --><swiper indicator-dots="true" autoplay="true" ><swiper-item wx:for="{{swiperList}}" wx:for-item="banner" wx:key="*this"><image style="width:100%" mode="widthFix" src="{{banner}}"></image></swiper-item></swiper>
修改图片宽度后的效果，看着还不错
(2) 修改轮播图高度
修改图片宽度后其实显示还是有问题的，我们以第一张图片为例，来看看原图的样子
通过与原图对比，可以发现，轮播图中的图片，高度显示的不全，这是因为轮播图组件的默认高度为 150px，而且
其不会被内容撑开，我们在上一步中，修改了图片的宽度并设置了mode="widthFix"，这会导致图片改变宽度后，
高度也会等比例变化，而变化后的高度明显是大于了轮播图组件默认的 150px，所以导致图片高度显示不全
我们例子中的图片，其原图宽度是 750px，高度是 340px，那么是不是直接将轮播图的高度设置为 340px 就可以了
呢，其实这样是不行的，修改轮播图的高度相对复杂，需要计算，我们需要有一些前置知识，看完前面的系列文章
我们至少要知道两点：
微信小程序的默认宽度是750rpx尺寸单位rpx和px间的转换
至于为什么高度要计算，是因为我们设置图片宽度width=100%时，其实就是width=750rpx，所以我们设置的图片
高度也应该是rpx单位，这就需要计算了，不过有了前置知识，计算起来也就不算很难了，我们可以按如下步骤来
计算图片的高度：
单位转换：原图宽度是 750px，轮播图宽度是 750rpx，rpx 比例 = 轮播图的宽 ( 750rpx ) / 原图的宽( 750px )计算原图的宽高比：原图高宽比例 = 原图高 / 原图宽 ( 340px / 750px )轮播图的宽是已知的,再利用原图的高宽比就能计算出轮播图的高，轮播图的高 = 轮播图的宽 * 原图宽高比 * 单位转换
按照上面的步骤我们可以计算出：750 * (340 / 750) * (750 / 750) = 340rpx，重点代码在第 2 行
<!-- 自动播放、有指示点的轮播图组件 --><swiper style="height:340rpx;" indicator-dots="true" autoplay="true"><swiper-item wx:for="{{swiperList}}" wx:for-item="banner" wx:key="*this"><image style="width:100%" mode="widthFix" src="{{banner}}"></image></swiper-item></swiper>
最终运行效果
二、scroll-view 可滚动视图区域
上图效果就是典型的可滚动视图区域的使用场景，上图中一共使用两次可滚动视图区域，第一个用来滚动产品分
类，第二个用来滚动分类内容，微信小程序直接提供了可滚动视图区域的组件，很方便
可滚动视图区域组件使用非常简单，直接使用<scroll-view>标签即可，注意，需要给<scroll-view>一个固定高度，
不然效果出不来，如果想横向滚动就在标签内添加属性scroll-x = "true"，想纵向滚动添加属性scroll-y = "true"，
更多关于可滚动视图区域的用法和属性，请参照 微信小程序 - scroll-view
示例：可滚动视图区域组件
在页面布局文件中使用<scroll-view>，并设置其宽度、允许纵向滚动
<view style="border:1px solid black; height: 550px;"><scroll-view style="height: 100%;" scroll-y="true"><view style="height:100px; width: 100px; border:1px solid black;">1</view><view style="height:100px; width: 100px; border:1px solid black;">2</view><view style="height:100px; width: 100px; border:1px solid black;">3</view><view style="height:100px; width: 100px; border:1px solid black;">4</view><view style="height:100px; width: 100px; border:1px solid black;">5</view><view style="height:100px; width: 100px; border:1px solid black;">6</view><view style="height:100px; width: 100px; border:1px solid black;">7</view><view style="height:100px; width: 100px; border:1px solid black;">8</view></scroll-view>滚动时不会印象这部分内容</view>
效果
