微信小程序实现banner图轮播效果


Posted in Javascript onJune 28, 2020

本文实例为大家分享了微信小程序实现banner图轮播的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现banner图轮播效果

indicator-active-color="#007aff"//修改选中图片圆点的颜色

js:

const app = getApp()
 
Page({
 data: {
 //-----------模拟banner图-----------
 imgUrls: [
 '/image/1545118381903.jpg',
 '/image/1545118566631.jpg'
 ],
 circular: true,
 //是否显示画板指示点 
 indicatorDots: true,
 //选中点的颜色 
 //是否竖直 
 vertical: false,
 //是否自动切换 
 autoplay: true,
 //自动切换的间隔
 interval: 3000,
 //滑动动画时长毫秒 
 duration: 1000,
 //所有图片的高度 
 imgheights: [],
 //图片宽度 
 imgwidth: 750,
 //默认 
 current: 0
 },
 imageLoad: function (e) {//获取图片真实宽度 
 var imgwidth = e.detail.width,
 imgheight = e.detail.height,
 //宽高比 
 ratio = imgwidth / imgheight;
 console.log(imgwidth, imgheight)
 //计算的高度值 
 var viewHeight = 750 / ratio;
 var imgheight = viewHeight;
 var imgheights = this.data.imgheights;
 //把每一张图片的对应的高度记录到数组里 
 imgheights[e.target.dataset.id] = imgheight;
 this.setData({
 imgheights: imgheights
 })
 },
 bindchange: function (e) {
 // console.log(e.detail.current)
 this.setData({ current: e.detail.current })
 },
 }
})

wxml:

<!-------------首页轮播图----------------- -->
<view class='swiper'>
 <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
 <block wx:for='{{imgUrls}}' wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
 </swiper-item>
 </block>
 </swiper>
</view>

wxss:

.swiper image {
 width: 100%;
 height: auto;
}
 
.swiper-image {
 height: 100%;
 width: 100%;
}
 
.slide-image {
 height: 100%;
 width: 100%;
 display: block;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 #Javascript
JavaScript类型相关的常用操作总结
Feb 14 #Javascript
VuePress 快速踩坑小结
Feb 14 #Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 #Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 #Javascript
VuePress 静态网站生成方法步骤
Feb 14 #Javascript
extract-text-webpack-plugin用法详解
Feb 14 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php 过滤危险html代码
2009/06/29 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
node.js基础知识小结
2018/02/26 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python列表使用实现名字管理系统
2019/01/30 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python如何调用百度识图api
2020/09/29 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书