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


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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
JQuery 文本框使用小结
May 22 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
理解javascript对象继承
Apr 17 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
JS 验证码功能的三种实现方式
Nov 26 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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登陆页的密码处理方式分享
2013/10/14 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
nodejs教程之入门
2014/11/21 NodeJs
js的toUpperCase方法用法实例
2015/01/27 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
tensorflow 查看梯度方式
2020/02/04 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
节能环保家庭事迹材料
2014/08/27 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript