微信小程序----开发rui-swiper多样式轮播组件

swiper详解

滑块视图容器。swiper的初始化高度为150px;swiper-item的初始高度和宽度为100%;都可通过css样式进行swiper、swiper-item的样式重置。swiper原生组件详解

swiper组件开发

如何使用

到 GitHub 下载 WX-RUI 的代码，将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 swiper 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {"rui-swiper": "../../component/swiper/swiper"
}

2. 在 wxml 中使用组件：

2.1 常规滑动轮播

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true"
></rui-swiper>

2.2 衔接滑动轮播(循环滑动轮播)

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true" circular="true"
></rui-swiper>

效果图1 ---- 常规滑动轮播和循环滑动轮播

2.3 纵向滑动轮播

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true" vertical="true"
></rui-swiper>

2.4 纵向衔接滑动轮播(纵向循环滑动轮播)

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true" circular="true" vertical="true"
></rui-swiper>

效果图2 ---- 纵向滑动轮播和纵向循环滑动轮播

2.5 后边距滑动

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true" imgwidth="90vw" circular="true" next-margin="30px"
></rui-swiper>

2.6 前后边距滑动轮播

<rui-swiper swiperList="{{bannerList}}" indicatorDots="true" autoplay="true" current='{{current}}' isOpacity="true" isScale="true"  imgwidth="82vw" circular="true" previous-margin="30px" next-margin="30px" rui-class="rui-banner-img" bindswiperfinish='changeFun'
></rui-swiper>

效果图3 ---- 后边距滑动和前后边距滑动轮播

2.7 多图片滑动轮播

<rui-swiper swiperList="{{bannerList}}" circular="true" autoplay="true" display-multiple-items="2" swiperheight="21.333vw" imgheight="21.333vw" imgwidth="50vw" current='0'
></rui-swiper>

2.8 文字滑动导航

<rui-swiper type="text" class='rui-active' swiperList="{{navList}}" display-multiple-items="4" swiperheight="12vw" imgheight="12vw" previous-margin="10px" next-margin="10px" current='{{current_text}}' circular="true" imgwidth="calc((100vw - 20px) / 4 - 40px)" bindswipertap="getIndex"
></rui-swiper>

效果图4 ---- 多图片滑动轮播和文字滑动导航效果图

参数说明

属性名	类型	默认值	说明
swiperwidth	String	‘’	swiper的宽度
swiperheight	String	‘’	swiper的高度
imgwidth	String	‘’	swiper中图片的宽度
imgheight	String	‘’	swiper中图片的高度
swiperList	Array	[]	swiper的内容数组
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
displayMultipleItems	Number	1	同时显示的滑块数量
current	Number	0	当前所在滑块的 index
currentItemId	String	‘’	当前所在滑块的 item-id ，不能与 current 被同时指定
indicatorColor	String	‘’	指示点颜色
indicatorActiveColor	String	‘’	当前选中的指示点颜色
previousMargin	String	‘0px’	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
nextMargin	String	‘0px’	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
autoplay	Boolean	false	是否自动切换
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
indicatorDots	Boolean	false	是否显示面板指示点
isOpacity	Boolean	false	是否设置图片透明度
isScale	Boolean	false	是否设置图片缩放比例
skipHiddenItemLayout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindswiperchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current}
bindswiperfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

QQ交流群: 264303060

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----开发rui-swiper多样式轮播组件相关推荐

微信小程序轮子 - 基于 swiper 常见轮播图轮子大全（竖立卡片式 / 横向卡片式 / 带左右箭头 / 细条指示器）
前言复制 → 粘贴 → 修改 → 你的了. 第一种(竖立卡片式) wxml: <view class='pageBox pageOne'><view class='list'
微信小程序开发教程：项目五导航组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题简述如何动态设置窗口的背景色. 六.编程题 1.设计一款 ...
微信小程序开发教程：项目六媒体组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题请简单列举音频接口API创建的InnerAudioCon ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序开发尚学堂介绍项目结构组件喧嚷事件模板
一.微信小程序介绍 1. 微信小程序介绍微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
微信小程序开发实战（二）UI组件介绍 Vant Weapp
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant We ...
制作微信小程序第三天（轮播图导航栏按钮框）
1.轮播图的实现 .wxss swiper{width: 100%;height: calc(100vm * 352 / 1125) } image{width:100% } .wxml <sw ...
微信小程序--一个简洁好看的轮播图组件（含源码）
效果图组件源码文件示意图 js // components/theSwiper.js Component({/*** 组件的属性列表*/properties: {imgUrls: Array,}, ...
微信小程序|开发实战篇之八-list列表组件及其子组件
开发实战篇之八前言 1.list选择器组件 1.1 子组件---tag标签组件 1.1.1 tag的骨架文件wxml 1.1.2 tag的js文件 2.list选择器wxml骨架文件 3.list选 ...
微信小程序开发03(样式wxss与常用组件)
样式与常用组件