微信小程序使用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 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
javascript类型转换使用方法
Feb 08 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
Express的路由详解
Dec 10 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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
php递归删除目录与文件的方法
2015/01/30 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
php中的登陆login实例代码
2016/06/20 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
基于Jquery实现键盘按键监听
2014/05/11 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
简单的js计算器实现
2016/10/26 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年妇女工作总结
2015/05/14 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python