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


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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
js判断是否是手机页面
Mar 17 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
新手入门js闭包学习过程解析
Oct 08 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中变量及部分适用方法
2008/03/27 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python实现简单名片管理系统
2018/11/30 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
彻底解决Python包下载慢问题
2020/11/15 Python
十岁生日同学答谢词
2014/01/19 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
红歌会主持词
2015/07/02 职场文书
物业公司管理制度
2015/08/05 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
css3 选择器
2022/05/11 HTML / CSS