微信小程序实现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 prototype,executing,context,closure
Dec 24 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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 变量未定义等错误的解决方法
2011/01/12 PHP
2014过年倒计时示例
2014/01/31 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
怎么清空javascript数组
2013/05/11 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
校园新闻广播稿
2014/01/10 职场文书
应用数学专业求职信
2014/03/14 职场文书
海飞丝广告词
2014/03/20 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
公司放假通知范文
2015/04/14 职场文书
图书借阅制度范本
2015/08/06 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript