微信小程序使用swiper组件实现类3D轮播图


Posted in Javascript onAugust 29, 2018

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现

效果图如下:

微信小程序使用swiper组件实现类3D轮播图

1.swiper的相关属性

  • indicator-dots 是否显示小圆点,也可以自己重新设置小圆点
  • circular 是否衔接滑动,就是实现无限滚动
  • previous-margin 与上一张图片的间距
  • next-margin 与下一张图片的间距
  • autoplay 实现自动滚动

这里主要利用了circular实现无限滚动,然后再加上前后间距,再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了

wxml文件

<!--carousel/index.wxml-->
<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
 <block wx:for="{{3}}" wx:key="{{index}}">
 <swiper-item class="item">
 <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></image>
 </swiper-item>
 </block>
</swiper>

wxss文件

/* carousel/index.wxss */
page{
 background: #f7f7f7f7;
}
.imageContainer{
 width: 100%;
 height: 500rpx;
 background: #000;
}
.item{
 height: 500rpx;
}
.itemImg{
 position: absolute;
 width: 100%;
 height: 380rpx;
 border-radius: 15rpx;
 z-index: 5;
 opacity: 0.7;
 top: 13%;
}
.active{
 opacity: 1;
 z-index: 10;
 height: 430rpx;
 top: 7%;
 transition:all .2s ease-in 0s;
}

JS文件

// carousel/index.js
Page({

 data: {
 currentIndex: 0
 },

 onLoad: function (options) {
 
 },
 /* 这里实现控制中间凸显图片的样式 */
 handleChange: function(e) {
 this.setData({
 currentIndex: e.detail.current
 })
 },
})

总结

以上所述是小编给大家介绍的微信小程序使用swiper组件实现类3D轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
vue模板语法-插值详解
Mar 06 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
JS实现打砖块游戏
Feb 14 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
javascript中UMD规范的代码推演
Aug 29 #Javascript
详解webpack自定义loader初探
Aug 29 #Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 #Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
Javascript - HTML的request类
2007/01/09 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
课外访万家心得体会
2014/09/03 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL