微信小程序实现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 相关文章推荐
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
全网小程序接口请求封装实例代码
Nov 06 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
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
python局部赋值的规则
2013/03/07 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
大学活动策划书范文
2014/01/10 职场文书
大学生就业意向书范文
2014/04/01 职场文书
师德师风事迹材料
2014/12/20 职场文书
消防安全主题班会
2015/08/12 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python