swiper组件添加左右箭头
时间:2022-05-03
本文章向大家介绍swiper组件添加左右箭头,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。
思路很简单:在swiper组件内部添加两个image组件,绑定点击事件,动态改变swiper中的current值。不废话,主要看代码:
WXML:
<swiper indicator-dots="{{swiper.indicatorDots}}"
autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current='{{swiper.current}}' circular="true">
<block wx:for="{{swiper.imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
<image class='prev arrow' bindtap='prevImg' src='/images/prev.jpg' />
<image class='next arrow' bindtap='nextImg' src='/images/next.jpg' />
</swiper>
WXSS:
swiper{
position: relative;
height: 300rpx;
}
swiper image{
display: block;
width: 100%;
height: 300rpx;
cursor: pointer;
}
swiper .arrow{
width: 30rpx;
height: 46rpx;
}
swiper .prev{
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
swiper .next{
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
JS:
//index.js
Page({
data: {
swiper: {
imgUrls: [
'/images/swiper01.jpg',
'/images/swiper02.jpg',
'/images/swiper03.jpg'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000,
current: 0,
}
},
prevImg: function(){
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current>0 ? current-1 : swiper.imgUrls.length-1;
this.setData({
swiper: swiper,
})
},
nextImg: function () {
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
this.setData({
swiper: swiper,
})
}
})
看一下完成之后的效果:
貌似还不错,有用到这功能的同学,直接copy代码运行即可~
- ASP.NET MVC基于标注特性的Model验证:ValidationAttribute
- 【深度学习系列】卷积神经网络详解(二)——自己手写一个卷积神经网络
- 区块链钱包mMoney向GooglePay、Applepay发起挑战
- Model验证系统运行机制是如何实现的?
- CentOS 6.8 部署zookeeper集群
- ASP.NET MVC基于标注特性的Model验证:DataAnnotationsModelValidator
- 使用容器进行应用程序路由
- MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel
- ASP.NET MVC以ModelValidator为核心的Model验证体系: ModelValidatorProviders
- 我所理解的RESTful Web API [设计篇]
- 黑箱难题阻碍了深度学习的普及与发展
- iOS 转场动画探究(一)
- XCode中如何使用事务
- 如何部署编译NDIS驱动的环境(内部资料)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 启用chrome浏览器内置的二维码生成插件
- ZeroLogon漏洞(CVE-2020-1472)防御性指南
- 原创 | 随机数大家都会用,但是你知道生成随机数的算法吗?
- 原创 | codeforces 1425E,一万种情况的简单题
- 原创 | codeforces 1417C,逆向思考的数据结构题
- 原创 | 操作失误不要慌,这个命令给你的Git一次反悔的机会
- 原创 | 想做推荐算法?先把FM模型搞懂再说
- 活见鬼,明明删除了数据,空间却没减少!
- 原创 | Git仓库的提交记录乱成一团,怎么办?
- 原创 | 平面内有N个点,如何快速求出距离最近的点对?
- 原创 | codeforces 1426F,初学者也能做,div3的最难题
- 安全研究 | YARA规则阻止Windows事件日志记录
- 研究人员如何使用Shhgit搜索GitHub中的敏感数据
- 使用nProbe监控移动网络(2G,3G和LTE)
- Mykings僵尸网络新变种已感染超5万台电脑