本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下
1.逻辑层
mine.js
// pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, // 是否显示面板指示点 autoplay: true, // 是否自动切换 interval: 5000, // 自动切换时间间隔 duration: 500, // 滑动动画时长 circular: true, // 是否采用衔接滑动 /*自定义轮播图 配置*/ slider: [ { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' }, { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' }, { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' } ], swiperCurrent: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //轮播图的切换事件 swiperChange: function (e) { //只要把切换后当前的index传给<swiper>组件的current属性即可 this.setData({ swiperCurrent: e.detail.current }) }, //点击指示点切换 chuangEvent: function (e) { this.setData({ swiperCurrent: e.currentTarget.id }) } })
2.页面布局
mine.wxml
<!--pages/mine/mine.wxml--> <view> <!-- 轮播图 --> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> <block wx:for="{{imgUrls}}" wx:key="id"> <swiper-item> <image src="/UploadFiles/2021-04-02/{{item}}">3.样式
mine.wxss
/* pages/mine/mine.wxss */ /**轮播图 start**/ .swiper { height: 400rpx; width: 100%; } .swiper image { height: 100%; width: 100%; } /**轮播图 end**/ /**自定义轮播图 start**/ .swiper-container{ position: relative; } .swiper-container .swiper{ height: 400rpx; } .swiper-container .swiper .img{ width: 100%; height: 100%; } .swiper-container .dots{ position: absolute; right: 40rpx; bottom: 20rpx; display: flex; justify-content: center; } .swiper-container .dots .dot{ margin: 0 10rpx; width: 28rpx; height: 28rpx; background: #fff; border-radius: 50%; transition: all .6s; font: 300 18rpx/28rpx "microsoft yahei"; text-align: center; } .swiper-container .dots .dot.active{ background: #f80; color:#fff; } /**自定义轮播图 end**/4.效果图
5.参数
更多关于轮播图效果的专题,请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,Swiper,轮播图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“微信小程序实现Swiper轮播图效果”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
20240516
20240516
- 谭小环.1997-自主【BMG】【WAV+CUE】
- 张震岳《精选 滚石SACD系列》首批限量编号 [SACD ISO][1.1G]
- 童丽《独家爱唱7》头版限量编号24K金碟[DFF][1.6G]
- 韩宝仪《我心若玫瑰》[WAV+CUE][441M]
- 群星《经典老歌百万畅销LP黑胶》10CD[WAV+CUE][6.3G]
- 蔡琴《伤心小站SACD》[DSF][1.1G]
- 群星《青春重置计划 4 珍稀》[320K/MP3][207.12MB]
- 黑帝斯哈迪斯2女巫之杖法杖图鉴及附魔效果一览 法杖图文攻略
- 鸣潮炽霞声骸怎么选择 炽霞声骸搭配及词条选择攻略
- 黑帝斯哈迪斯2姊妹双刃图鉴及附魔效果一览 黑帝斯哈迪斯2全武器图文介绍
- 刘文正.2013-金典歌展2CD【南方】【WAV+CUE】
- 刘珺儿.2001-标准心上人【P.TMUSIC】【WAV+CUE】
- 谭小环.1997-自主【BMG】【WAV+CUE】
- WBG入选沙特电竞世界杯!角逐多个电竞项目
- 《小谢尔顿》最终季大结局首曝片段 成年谢米回归!