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

功能介绍

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

可配置项

这里只简单列出示例中所需的一些属性,如需了解更多 【请点击,了解更多详情】

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

示例

场景

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

WXML:

<page>
<view class='wrap-swiper'>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{current}}" bindchange='testDetails' indicator-active-color='#fff'>
<block wx:for="{{imgUrls}}" wx:key="key">
<swiper-item>
<image src="https://user-gold-cdn.xitu.io/2018/1/15/160f8b440965adf5" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="wrap">
<button bindtap='nextPage'>跳转下一题</button>
</view>
</view>
</page>

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
}
}
})

运行效果:

小程序内置组件swiper,circular(衔接)使用小技巧的更多相关文章

  1. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

  2. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

  3. 【微信小程序】常用组件及自定义组件

    (一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...

  4. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  5. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  6. 微信小程序内嵌网页的一些(最佳)实践

    前言 3 个月前,微信小程序推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小程序前端生态. 我们曾大胆猜想,这一功能,可能直接导致小程序数量增长迎 ...

  7. 微信小程序内训笔记

    2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例, ...

  8. [小程序开发] 微信小程序内嵌网页web-view开发教程

    为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...

  9. 微信小程序内嵌业务域名内的网页

    微信小程序在2017年11月左右开放了内嵌网页的功能,即新组件<web-view>.官方文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/com ...

随机推荐

  1. c++11多线程---线程操作

    1.等待线程执行完成 join() 方法数会阻塞主线程直到目标线程调用完毕,即join会直接执行该子线程的函数体部分. 2.暂停线程(线程休眠) 使用std::this_thread::sleep_f ...

  2. 【漏洞学习】slowHTTPtest 慢速 DOS 攻击方法 修复方案

    日期:2018-05-28 21:41:59 更新:2019-07-05 23:15:21 作者:Bay0net 介绍:学习一下 slowHTTPtest 的攻击及防御. 0x01. 安装 下载链接 ...

  3. CMakeLists.txt中使用循环

    编译一个安卓下的so,此so依赖其他的库,通过循环简化操作 set(UVC_LIBS UVCCamera uvc usb100 jpeg-turbo1500) FOREACH(UVC_LIB ${UV ...

  4. linux下搭建mysql数据库

    linux下搭建mysql数据库 1.下载mysql: http://dev.mysql.com/downloads/mysql/5.6.html#downloads wget http://dev. ...

  5. 【ABAP系列】SAP ABAP DYNP_VALUES_UPDATE 更新屏幕字段的函数及用法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DYNP_VA ...

  6. 使用Sklearn构建朴素贝叶斯分类器-新闻分类

    # -*- coding: UTF-8 -*- import jieba import os import random from sklearn.naive_bayes import Multino ...

  7. 【linux开发】ubuntu执行sudo apt-get update提示缺少公钥

    ubuntu执行sudo apt-get update提示缺少公钥 提示信息如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 获取:1 http://arch ...

  8. docker私有仓库-harbor

    简单说一下Harbor的部署,踩了几个坑,参考同事大神的配置文件,一脸懵逼的部署出来了,其中部分内容参考了网上一些大神的文档,本篇文章仅供参考学习,如有雷同,万分荣幸. 这篇文档仅限于centos7参 ...

  9. linux 获取目录中详细信息 -rw-r--r--详解

    -rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解 查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l ...

  10. gcc编译工具生成动态库和静态库

    一. 库的分类 1.1. 静态库(.a) 1.1.1. 静态库的代码在编译过程中已经被载入可执行程序,因此体积比较大.所以生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行. 1. ...