微信小程序实现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 相关文章推荐
用jquery仿做发微博功能示例
Apr 18 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
原生js实现放大镜效果
Jan 11 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
php实现网站留言板功能
2015/11/04 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
民族学专业求职信
2014/07/28 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
党员先进事迹材料
2014/12/19 职场文书
应聘教师求职信范文
2015/03/20 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
工资证明格式模板
2015/06/12 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python