微信小程序使用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 相关文章推荐
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
利用JS实现数字增长
Jul 28 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
antd design table更改某行数据的样式操作
Oct 31 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python SOCKET编程基础入门
2021/02/27 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
校园门卫岗位职责
2013/12/09 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
打架检讨书400字
2014/01/17 职场文书
销售人员获奖感言
2014/02/05 职场文书
入职担保书怎么写
2014/05/12 职场文书
团支部推优材料
2014/05/21 职场文书
期末个人总结范文
2015/02/13 职场文书