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


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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Vue实现简单的跑马灯
May 25 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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无限分类使用concat如何实现
2015/11/05 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
精彩自我鉴定
2014/01/16 职场文书
农贸市场管理制度
2014/01/31 职场文书
公司活动方案范文
2014/03/06 职场文书
初中家长评语大全
2014/12/26 职场文书
国庆节慰问信
2015/02/15 职场文书
后天观后感
2015/06/08 职场文书
法律讲堂观后感
2015/06/11 职场文书
农村婚庆主持词
2015/06/29 职场文书
教师病假条范文
2015/08/17 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle