【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录
- 前言
- 1、引入外部链接图片资源
- 2、让swiper来调整适应图片的宽高
- 3、实现轮播效果--autoplay
- 总结
- 欢迎点赞,收藏,加关注
前言
此例子是用微信小程序组件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
<swiperautoplay="{{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等一些属性,就可达到轮播图的效果啦
总结
实现微信小程序的轮播图效果其实就是使用swiper和swiper-item标签以及设置属性计算swiper的高度即可。
想起之前的HTML5动画设计课程,老师叫我们通过Javascript来实现页面的轮播图效果,对比小程序,用js来实现轮播图那可就太复杂了!
此次微信小程序的轮播图效果实现详细步骤讲解希望能带给你帮助~~~
如有不足之处,请评论区提出批评指正!多多指教!
今后会继续分享关于Vue.js、Node.js等知识干货,大家一起交流学习~
欢迎点赞,收藏,加关注
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)相关推荐
- 【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果 轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
- 微信小程序最简单的轮播图
小程序轮播图 今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码 基本属性介绍 <!-- indic ...
- 微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 小程序实现3D轮播图效果
小程序通过swiper标签实现3D轮播图效果 一.效果图 二.代码块 1.html <view wx:if="{{slideList.length>0}}" class ...
- 后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码 无缝轮播图效果 总体思路 下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
- html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
最新文章
- 关于Android中的onCreate()多次被调用导致bindService被多次调用的问题...
- ubuntu 10.04源 更新源列表
- H5js的一些好玩的东西
- php ftp 创建文件夹失败,phpftp上传多个文件时失败
- 机器学习(十五)——loss function比较、独立成分分析
- 一个redis的连接库的实现
- C#桌面开发的未来WebWindow
- 【渝粤题库】陕西师范大学210011幼儿园语言教育作业(高起专)
- Ethercat解析(五)之基础答疑
- 中国碳酸亚乙酯(EC)(CAS+96-49-1)行业市场供需与战略研究报告
- Dubbo 快速入门教程
- CORS手机测试软件,司南导航RTK手簿软件测量大师连接千寻cors账号进行测量的方法教程...
- 站队(使用插入排序完成) (Standard IO)————c++插入排序
- Linux虚拟机克隆后网络冲突解决办法
- vmsd文件+服务器,VMWARE ESX中利用SnapShot(快照)文件恢复虚拟机数据
- bearer token_接口认证方式:Bearer Token
- 基于反馈电阻法的恒流源小信号的检测
- 如何正确地给固态硬盘(SSD)分区
- OS=Windows OS=Windows and the assembly descriptor contains a *nix-specific root-relative-reference
- linux的./configure --prefix的作用