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


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 相关文章推荐
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
js常用DOM方法详解
Feb 04 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
微信小程序使用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中显示格式化的用户输入
2006/10/09 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python同步windows和linux文件
2019/08/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
行政内勤岗位职责
2014/04/07 职场文书
公司老总年会致辞
2015/07/30 职场文书
防溺水主题班会教案
2015/08/12 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记