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


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中创建对象的几种方法总结
Nov 01 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
JS中FormData类实现文件上传
Mar 27 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开发需要注意的安全问题
2010/09/01 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python实现弹跳小球
2019/05/13 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python+OpenCV实现图像拼接
2020/03/05 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
工作自荐信
2013/12/11 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
小学生安全演讲稿
2014/04/25 职场文书
超越自我演讲稿
2014/05/21 职场文书
单位计划生育责任书
2015/05/09 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python