博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序内置组件swiper,circular(衔接)使用小技巧
阅读量:7103 次
发布时间:2019-06-28

本文共 1563 字,大约阅读时间需要 5 分钟。

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技巧,当然你也可以理解为遇到了一个小坑,因为不能把整个项目搬上来,所以这里用一个小事例去简单的描述一下。

功能介绍

swiper滑块视图容器(轮播效果)

可配置项

这里只简单列出示例中所需的一些属性,如需了解更多

indicatorDots: true, //  是否显示面板指示点    autoplay: false, // 是否自动切换    circular: true, // 是否采用衔接滑动    current: 0, // 当前所在页面的 index    interval: 500, // 自动切换时间间隔    duration: 500 // 滑动动画时长

示例

场景

类答题效果,答对本题自动跳转下一题,并保持滑块的衔接效果(这里我们用按钮来代替自动跳转)

WXML:

WXSS:

swiper{  width: 80%;  margin: 0 auto;  margin-top: 20%;  padding-top: 25px;}.wrap{  display: flex;  justify-content: space-around;  margin-top: 25px;}.wrap-swiper{  background: rgba(0,0,0, 0.1) ;  padding-bottom: 25px;  margin-left: 15px;  margin-right: 15px;}

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: false, // 是否自动切换    circular: true, // 是否采用衔接滑动    current: 0, // 当前所在页面的 index    interval: 500, // 自动切换时间间隔    duration: 500 // 滑动动画时长  },  testDetails (e) {    // bindchange事件    console.log(e)  },  nextPage () {    // 跳转下一题     let current = this.data.current     current++     if (current > 2) {      current = 0     }  }})

运行效果:

v2-6cf81a703ddff12c200b0855eef3c758_b.gif

转载地址:http://rkuhl.baihongyu.com/

你可能感兴趣的文章
函数指针
查看>>
MongoDB聚合运算之mapReduce函数的使用(11)
查看>>
Java -- 获取MAC地址
查看>>
URL中的#
查看>>
Sql Server导入Access数据库报不可识别的数据库格式 Microsoft JET Database Engine
查看>>
目标检測的图像特征提取之(一)HOG特征
查看>>
ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件...
查看>>
博客计划【推荐系统】
查看>>
Quartz 任务调度(二)
查看>>
理解Java对象序列化
查看>>
(转载)Hbase -- hbase 压缩
查看>>
Installing ZFS RAID-Z on CentOS 6.6 with SSD
查看>>
设置字体样式及大小
查看>>
ENVI软件操作之【数据的显示操作】
查看>>
深入分析FreeDos -- FreeCom编译
查看>>
【Android】不知道的 setLayoutParams
查看>>
gitlab的ci功能测试之旅
查看>>
Git使用SSH密钥及基本配置
查看>>
DNS 原理入门
查看>>
【自用】Android 用三明治法解决非主线程Toast,报错问题
查看>>