小程序内置组件swiper,circular(衔接)使用小技巧
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(衔接)使用小技巧的更多相关文章
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- 【微信小程序】常用组件及自定义组件
(一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- 微信小程序内嵌网页的一些(最佳)实践
前言 3 个月前,微信小程序推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小程序前端生态. 我们曾大胆猜想,这一功能,可能直接导致小程序数量增长迎 ...
- 微信小程序内训笔记
2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例, ...
- [小程序开发] 微信小程序内嵌网页web-view开发教程
为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...
- 微信小程序内嵌业务域名内的网页
微信小程序在2017年11月左右开放了内嵌网页的功能,即新组件<web-view>.官方文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/com ...
随机推荐
- c++11多线程---线程操作
1.等待线程执行完成 join() 方法数会阻塞主线程直到目标线程调用完毕,即join会直接执行该子线程的函数体部分. 2.暂停线程(线程休眠) 使用std::this_thread::sleep_f ...
- 【漏洞学习】slowHTTPtest 慢速 DOS 攻击方法 修复方案
日期:2018-05-28 21:41:59 更新:2019-07-05 23:15:21 作者:Bay0net 介绍:学习一下 slowHTTPtest 的攻击及防御. 0x01. 安装 下载链接 ...
- CMakeLists.txt中使用循环
编译一个安卓下的so,此so依赖其他的库,通过循环简化操作 set(UVC_LIBS UVCCamera uvc usb100 jpeg-turbo1500) FOREACH(UVC_LIB ${UV ...
- linux下搭建mysql数据库
linux下搭建mysql数据库 1.下载mysql: http://dev.mysql.com/downloads/mysql/5.6.html#downloads wget http://dev. ...
- 【ABAP系列】SAP ABAP DYNP_VALUES_UPDATE 更新屏幕字段的函数及用法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DYNP_VA ...
- 使用Sklearn构建朴素贝叶斯分类器-新闻分类
# -*- coding: UTF-8 -*- import jieba import os import random from sklearn.naive_bayes import Multino ...
- 【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 ...
- docker私有仓库-harbor
简单说一下Harbor的部署,踩了几个坑,参考同事大神的配置文件,一脸懵逼的部署出来了,其中部分内容参考了网上一些大神的文档,本篇文章仅供参考学习,如有雷同,万分荣幸. 这篇文档仅限于centos7参 ...
- linux 获取目录中详细信息 -rw-r--r--详解
-rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解 查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l ...
- gcc编译工具生成动态库和静态库
一. 库的分类 1.1. 静态库(.a) 1.1.1. 静态库的代码在编译过程中已经被载入可执行程序,因此体积比较大.所以生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行. 1. ...