微信小程序实现带缩略图轮播效果


Posted in Javascript onNovember 04, 2018

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

wxml:

<view id="content">
 <!--banner-->
 <view class="recommend">
  <view class="swiper-container">
   <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" circular="{{circular}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{{slider}}" wx:key="unique">
     <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvents" id="{{index}}">
      <image src="{{item.picUrl}}" class="img"></image>
      <span>{{item.index+1}}</span>
     </swiper-item>
    </block>
   </swiper>
   <view class="dots">
    <swiper autoplay="auto" interval="5000" display-multiple-items="7" duration="500" current="{{dotsCurrent}}" circular="{{circular}}" bindchange="dotsChange">
     <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item data-id="{{item.id}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">
       <image src="{{item.picUrl}}" class="imgs"></image>
      </swiper-item>
     </block>
    </swiper>
   </view>
 
  </view>
 </view>
</view>

wxss:

/* pages/shouye/shouye.wxss */
 
page {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
 
#content {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
 
a {
 width: 100%;
 height: 50px;
 overflow: hidden;
}
 
/*banner轮播 */
 
.swiper-container {
 margin-top: 23%;
 position: relative;
}
 
.swiper-container .swiper {
 height: 600rpx;
}
 
.swiper-container .swiper .img {
 width: 100%;
 height: 100%;
}
 
.swiper-container .dots {
 position: fixed;
 height: 80px;
 right: 0rpx;
 width: 100%;
 bottom: 0rpx;
}
 
.swiper-container .dots .dot {
 /* margin: auto 3px; */
 /* width: 58px !important; */
 height: 65px !important;
 /* background: #333; */
 /* transition: all 0.6s; */
}
 
.swiper-container .dots .dot.active .imgs {
 width: 100% !important;
 height: 100%;
 margin: 0% auto;
}
 
.imgs {
 width: 85%;
 display: block;
 margin: 5% auto;
 height: 90%;
}
 
.swiper-container .dotes {
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
 
.swiper-container .dotes .dote {
 margin: 0 10rpx;
 width: 28rpx;
 height: 28rpx;
 background: #fff;
 border-radius: 50%;
 transition: all 0.6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
 
.swiper-container .dotes .dote.actives {
 background: #f80;
 color: #fff;
}

js

//banner
Page({
 data: {
  //轮播图
  slider: [],
  swiperCurrent: 3,
  slider: [{
   url: '', picUrl: 'images/1.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/4.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  }
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforeColor: "white",//指示点颜色 
  afterColor: "coral",//当前选中的指示点颜色 
 },
 //轮播图的切换事件 
 swiperChange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可 
  this.setData({
   swiperCurrent: e.detail.current
  })
 },
 dotsChange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可 
  this.setData({
   dotsCurrent: e.detail.current
  })
 },
 //点击指示点切换 
 chuangEvent: function (e) {
  this.setData({
   swiperCurrent: e.currentTarget.id
  })
 },
 chuangEvents: function (e) {
  this.setData({
   dotsCurrent: e.currentTarget.id
  })
 },
 
})

效果图:

微信小程序实现带缩略图轮播效果

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

Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
You might like
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
php和asp语法上的区别总结
2019/05/12 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python中asyncore的用法实例
2014/09/29 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python API自动化框架总结
2019/11/12 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
少先队入队活动方案
2014/02/08 职场文书
实习生工作证明范本
2014/09/14 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python