微信小程序之 Swiper(轮播图)
2023-09-11 14:15:30 时间
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="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper> <!-- 自定义轮播图 --> <view class="swiper-container"> <swiper circular="true" autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"> <block wx:for="{{slider}}" wx:key="unique"> <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> <image src="{{item.picUrl}}" class="img"></image> </swiper-item> </block> </swiper> <view class="dots"> <block wx:for="{{slider}}" wx:key="unique"> <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view> </block> </view> </view> </view>
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.参数
相关文章
- HTML5+JS,微信平台开发
- 在微信小程序中绘制图表(part2)
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
- 解决:本图片来自微信公众号,未经许可,不能引用 问题
- 微信小程序苹果手机请求地址 报错404,安卓可以正常请求
- 微信接口测试
- 微信公众平台向特定用户推送消息
- uni-app:微信小程序登录:获取code时返回the code is a mock one(hbuilderx 3.7.3)
- H5及微信中唤起app的解决方案
- 微信小程序 —— 动态决定页面元素显示或隐藏的技巧
- signalr 应用于微信小程序(二)
- 微信小程序----Gallery Table(图文表格)(flex布局实现MUI的图文表格)
- 微信小程序----相对路径图片不显示
- 微信小程序----修改data中的数据,页面数据不改变
- 微信小程序----侧滑菜单(Popup---左侧滑动,右侧不动)(MUI侧滑导航)
- Atitit 推广之道 attilax著艾龙著 1. 概念呢2 1.1. 目的2 2. 与网络推广相近的概念有网络营销(搜索引擎营销、邮件营销、论坛营销、网站推广、网络广告、SNS营销、微信营销
- paip.提高效率---微信 手机app快速开发平台—微网络撬动大市场
- SAP Field Service Management 和微信集成的案例分享和实现介绍
- 【java】Java生成微信小程序二维码
- 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序
- Ubuntu18.04安装微信(方式二)
- 微信小程序练手实战:前端+后端(Java)
- cocos2dx游戏开发——微信打飞机学习笔记(四)——GameScene的搭建
- 微信小程序/uni——自定义导航栏
- Taro React组件开发(2) —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
- 微信小程序(游戏)----五子棋(AI篇)