微信小程序实现带放大效果的轮播图


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下

效果如图

微信小程序实现带放大效果的轮播图

WXML

<!-- 轮播图 -->
 <view class='Carousel'>
 <view class="recommend">
  <view class="swiper-container">
  <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
   <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item data-url="{{item.linkUrl}}">
    <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
   </swiper-item>
   </block>
  </swiper>
  <!-- 指示点 -->
  <!-- <view class="dots">
   <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
   </block>
  </view> -->
  </view>
 </view>
</view>

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: { 
 //轮播图
 slider: [
  { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
  { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' }, 
  { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
  ],
 swiperCurrent: 0,
 }
 
  /**
 * 轮播图
 */
 swiperChange: function (e) {
 //把切换后当前的index传给<swiper>组件的current属性
 this.setData({
  swiperCurrent: e.detail.current
 })
 },

 //点击指示点切换
 // chuangEvent: function (e) {
 // this.setData({
 //  swiperCurrent: e.currentTarget.id
 // })
 // },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue实现图片上传功能
May 28 #Javascript
小程序实现图片移动缩放效果
May 26 #Javascript
jQuery实现的分页插件完整示例
May 26 #jQuery
js实现时间日期校验
May 26 #Javascript
Node.js API详解之 assert模块用法实例分析
May 26 #Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 #Javascript
js校验开始时间和结束时间
May 26 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python创造虚拟环境方法总结
2019/03/04 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
pandas 空数据处理方法详解
2019/11/02 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
物流管理毕业生自荐信
2013/10/24 职场文书
实习单位推荐信范文
2013/11/27 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android