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


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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
js字符串操作方法实例分析
May 06 Javascript
jquery实现拖动效果
Aug 10 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Node.js  事件循环详解及实例
Aug 06 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
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
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
上海中网科技笔试题
2012/02/19 面试题
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
护理中职生求职信范文
2014/02/24 职场文书
农村门前三包责任书
2014/07/25 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2016年情人节问候语
2015/11/11 职场文书