【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)_微信轮播图-程序员宅基地

技术标签: 微信小程序  小程序  


前言

此例子是用微信小程序组件swiper来实现轮播图效果
小tips:
1.轮播图的外层容器是swiper
2.每个轮播项是swiper-item

1、引入外部链接图片资源

//swiper.wxml
<swiper>
	<swiper-item>
		<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
	<swiper-item>
		<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
	<swiper-item>
		<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
</swiper>

因微信小程序打包后的图片资源大小不能超过2兆,所以我们引用图片时选择引入外部链接的图片

2、让swiper来调整适应图片的宽高

在这里插入图片描述

调整前(页面太难看辽~~)

页面和我们平时所看的不一样,那是因为我们还没有进行调整:

知识点来咯~
swiper的默认宽度是100% 默认高度是150px;但swiper是无法实现将内容撑开的(即对此标签加任何样式都是无效的);所以我们需要手动计算swiper的高度,并添加进wxss样式里面

原理:等比例公式: 原图的宽度 / 高度 = swiper的宽度 / 高度

又因为图片默认的宽高是320*240,所以我们需要把我们引入的图片加一个width:100% 的样式

    我所引入的原图大小是:810*442 
    而swiper默认的宽度高度是:width:100%  height:150px

    公式:(等比例)
    原图width / height = swiper width / height
    所以得出计算swiper高度的公式
    swiper的高度=100% * 原图height / 原图width  
//swiper.wxss
swiper{
    
    width: 100%;
    //套用计算swiper高度的公式
    height: calc(100vw*442/810);
}
image{
    
  //图片自适应屏幕大小
    width: 100%;
}

调整过后的效果,我们还不能满足于此!我们还要为图片加上 mode="widthFix"这个强大武器!!以让图片更完美地显示出来~~

在这里插入图片描述

在这里插入图片描述

图片资源已调整完毕,接下来就是实现让它们”动“起来

3、实现轮播效果–autoplay

关于swiper的属性有以下多种:
在这里插入图片描述

<!--
autoplay:是否自动切换
circular:是否采用衔接滑动
indicator-dots:是否显示面板指示点
interval:设置自动切换时间间隔 
-->
//swiper.wxml
<swiper
 autoplay="{
     {true}}"
 circular="{
     {true}}"
 indicator-dots="{
     {true}}"
 interval="2000"
>
	<swiper-item>
		<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
	<swiper-item>
		<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
	<swiper-item>
		<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
	</swiper-item>
</swiper>

在这里插入图片描述

加上上面所提到的autoplay等一些属性,就可达到轮播图的效果啦

总结

实现微信小程序的轮播图效果其实就是使用swiperswiper-item标签以及设置属性计算swiper的高度即可。

想起之前的HTML5动画设计课程,老师叫我们通过Javascript来实现页面的轮播图效果,对比小程序,用js来实现轮播图那可就太复杂了!
此次微信小程序的轮播图效果实现详细步骤讲解希望能带给你帮助~~~
如有不足之处,请评论区提出批评指正!多多指教!

今后会继续分享关于Vue.js、Node.js等知识干货,大家一起交流学习~

欢迎点赞,收藏,加关注

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45680114/article/details/109399630

智能推荐

用installshield打包时在注册表里注册项和键值的动态设定方法_注册表new - > key-程序员宅基地

文章浏览阅读1.1w次。在11.5版本里,注册表的函数变化不多我在这里要记录的是打包的时候注册表的问题,注册表分项和键,打开注册表(开始->运行,输入regedit,确定),可以在左边的树形里看见很多文件夹的图标,这些是项,点击一个项,可以在右边看见他的键值,每个项都有一个“默认”,有的项还有很多键值在打包的时候,我们有时候要记录很多东西,嗯,我们要记录安装文件的类型(服务器端程序还是客户端程序),我们要记录软件_注册表new - > key

全志平台lichee启动时间优化_initial_debug-程序员宅基地

文章浏览阅读490次。1. 前言全志平台默认的SDK系统启动+相机出图的时间较长,普遍是十几秒,使用体验较差; 这里尝试通过一些方法优化整体启动时间2.统计内核耗时模块打开这个宏initial_debug,每个驱动的初始化起始时间和结束时间都打印出来了。有了这个时间,基本就可以确定哪些部分需要优化了。 我的做法是只关注耗时10000us以上的驱动。根据上面统计,可根据使用场景的需求, 尝试可以关闭相应不需要的模块3. 降低打印等级开发过程中往往会把系统的打印等级设置为最高,而实际上发布出的固件_initial_debug

《HelloGitHub》第 67 期-程序员宅基地

文章浏览阅读1.5k次。兴趣是最好的老师,HelloGitHub 让你对编程感兴趣!简介分享 GitHub 上有趣、入门级的开源项目。https://github.com/521xueweihan/HelloGi..._开源 lexer

如何做代码评审(code review)_code review怎么做-程序员宅基地

文章浏览阅读5.7k次。Code Review 即日常所说的代码评审或代码回顾,主要是在软件开发的过程中,对功能源代码进行评审,其目的是找出并修正软件开发过程中出现的错误的过程,提高和改进代码质量的过程。_code review怎么做

SSM9==SSM项目启动过程、xml配置SSM项目及需要的3大配置文件、原生SSM未前后端分离的电商网站项目(角色管理员、购买者)只使用了最基础的注解,Model传参_ssm框架 启动传参-程序员宅基地

文章浏览阅读2.1k次。SSM项目的启动过程:ssm框架中,项目启动过程以及web.xml配置详解_菜鸟不会飞-程序员宅基地_ssm项目启动入口是什么本篇主要在基于SSM的框架,深入讲解web.xml的配置web.xml 每个javaEE项目中都会有,web.xml文件是用来初始化配置信息:比如Welcome页面、servlet、servlet-mapping、filter、listener、启动加载级别等。 web.xml配置文件内容如下:&lt;!DOCTYPE web-app PUBLIC..._ssm框架 启动传参

npm设置代理,解决安装不了或安装失败等问题_npm config set disturl 失败-程序员宅基地

文章浏览阅读1.6k次。登陆后不用重启!npm config set proxy http://工号:密码@代理服务器地址:80npm config set https-proxy http://工号:密码@代理服务器地址:80_npm config set disturl 失败

随便推点

MongoDB 的简介、特点以及详解_mongodb特点-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏2次。1、概念_mongodb特点

Main class [org.apache.oozie.action.hadoop.HiveMain], exit code [10]_attempt recovered after rm restartmain class [org.-程序员宅基地

文章浏览阅读3k次。oozie执行hiveql,发生这样的异常!Main class [org.apache.oozie.action.hadoop.HiveMain], exit code [10]_attempt recovered after rm restartmain class [org.apache.oozie.action.hadoop

计算机毕业设计springboot网上排课系统的设计与实现w0d059【附源码+数据库+部署+LW】_排课系统数据库设计-程序员宅基地

文章浏览阅读255次。选题背景:随着互联网的快速发展,各行各业都在积极探索数字化转型的道路。教育领域也不例外,传统的排课方式已经无法满足现代学生和教师的需求。为了提高教学效率、优化资源利用以及提供更好的学习体验,许多学校和机构开始引入网上排课系统。这种系统通过在线平台实现课程的安排和管理,为学生和教师提供了更加便捷和灵活的排课方式。选题意义:网上排课系统的出现对于教育领域具有重要的意义。首先,它能够提高教学效率。传统的排课方式需要大量的人力和时间,而网上排课系统可以自动化地完成排课过程,减少了繁琐的手工操作,提高了排课的_排课系统数据库设计

对IO流关闭的思考_c++ 流不关闭-程序员宅基地

文章浏览阅读7.9k次,点赞3次,收藏13次。流必须要关闭的原因java相对C,C++来说不需要手动释放内存,在对象引用被消除之后,正常情况下内存资源是会被垃圾回收,那么在使用完IO流之后为什么需要手动关闭. 这是为了回收系统资源,比如释放占用的端口,文件句柄,网络操作数据库应用等.对Unix系统来说,所有的资源都可以抽象成文件,所以可以通过lsof来观察。看下面这个例子,我们创建许多的IO流但是不关闭public clas..._c++ 流不关闭

无法启动此程序,因为计算机中丢失api-ms-win-downlevel-shlwapi-l1-1-0.dll文件-程序员宅基地

文章浏览阅读2.5w次,点赞2次,收藏4次。最近遇到如题所示弹框的问题,花了很长时间才解决,解决方法却很简单。故记录下来。解决方法:找到相同系统却没有该问题的情况(比如出问题的是64位的win7系统,那就找一个没有该问题的64位的win7系统)。将正常系统的api-ms-win-downlevel-shlwapi-l1-1-0.dll文件复制到出现该问题的电脑的相应位置。就可以解决了。但是同样有一些问题需要注意详细步骤:有一些dl..._api-ms-win-downlevel-shlwapi-l1-1-0.dll

ResponseEntity, @ResponseBody, @ResponseStatus返回Json对象数据用法区分_responseentity json-程序员宅基地

文章浏览阅读325次。ResponseEntity:code:/*常用*/@GetMapping("/hello")public ResponseEntity<String> hello(){ return new ResponseEntity<>("hello word!",HttpStatus.OK);}/*设置HTTP头*/@GetMapping("/hello")pu..._responseentity json