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


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 动态生成私有变量访问器
Dec 06 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
remote接口和home接口主要作用
2013/05/15 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书