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


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 相关文章推荐
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
房地产融资计划书
2014/01/10 职场文书
七年级地理教学反思
2014/01/26 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
学员自我鉴定
2014/03/19 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
节约能源标语
2014/06/17 职场文书
财务负责人岗位职责
2015/02/03 职场文书
党支部审查意见
2015/06/02 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
python 中的jieba分词库
2021/11/23 Python