一、swiper 轮播图

轮播图是项目中最常见的功能，很多项目都会在首页中使用轮播图，我们传统的 web 项目中想使用一个较完美的轮
播图，要么手写，要么引入第三方组件，而微信小程序中，默认给我们提供了一个轮播图组件，使用起来非常方便，
本节就快速回顾一下微信小程序中轮播图的使用

1.1. swiper 基本使用

微信小程序中使用轮播图，需要 <swiper> 和 <swiper-item> 两个标签搭配使用，<swiper> 为个轮播图的最外层结
构，轮播图中的每一项则需要嵌套在 <swiper-item> 标签内

可以通过属性对 <swiper> 进行控制，本文列举一些最常用的属性，想学习更多的属性，请参照微信小程序 -
swiper 轮播图组件：

属性名	取值	描述
indicator-dots	布尔	是否显示轮播图下方的指示点
indicator-color	rgba 格式字符，如 “rgba(255,0,0,0.3)”	不处于激活状态时的指示点颜色
indicator-active-color	十六进制颜色字符，如 “#ccc”	处于激活状态时的指示点颜色
autoplay	布尔	轮播图是否自动播放
interval	数值	自动播放时，切换图片的时间间隔，毫秒单位
circular	布尔	衔接滑动，在最后一张图片时仍可以继续向后滑动回到第一张图片

示例：使用 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>

效果

七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )相关推荐

微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...
微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）
效果展示代码展示: WXML代码 <view class="selection_cards" bindtouchstart="touchstart" b ...

七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )

文章目录

一、swiper 轮播图

1.1. swiper 基本使用

1.2. 调整轮播图和图片的大小

二、scroll-view 可滚动视图区域

七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )相关推荐

最新文章

热门文章