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


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 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue实现购物车的监听
Apr 20 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开发入门教程之面向对象
2006/12/05 PHP
php中cookie的作用域
2008/03/27 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python中enumerate函数代码解析
2017/10/31 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
pandas分区间,算频率的实例
2019/07/04 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
模特职业生涯规划范文
2014/02/26 职场文书
工商管理自荐书
2014/07/06 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
会议主持词通用版
2019/04/02 职场文书
python双向链表实例详解
2022/05/25 Python