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


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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
js中split和replace的用法实例
Feb 28 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
原生js实现日期选择插件
May 21 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php获取url参数方法总结
2014/11/13 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript实现画不相交的圆
2015/04/07 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js判断密码强度的方法
2020/03/18 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
javascript实现评分功能
2020/06/24 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python几种常见算法汇总
2020/06/02 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
优秀干部获奖感言
2014/01/31 职场文书
小学体育教学反思
2014/01/31 职场文书
护理工作个人总结
2015/03/03 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
小英雄雨来观后感
2015/06/09 职场文书
七年级作文之游记
2019/12/11 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
MySQL GRANT用户授权的实现
2021/06/18 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫