微信小程序实现轮播图指示器

本文实例为大家分享了微信小程序实现轮播图指示器的具体代码，供大家参考，具体内容如下

1.文件目录

2.轮播图页面布局

需求：自定义轮播指示器：当轮播图发生变化时，自定义轮播指示器跟随图片发生对应改变

bindchange:current 改变时会触发 change 事件，即当图片索引发生变化时触发的事件

current：当前所在滑块的 index (number类型)

autoplay: 是否自动切换

interval: 自动切换时间间隔

circular: 是否采用衔接滑动

<view class="swiper">
<!-- bindchange:current 改变时会触发 change 事件-->
  <swiper bindchange="change" autoplay interval="{{1500}}" circular>
    <swiper-item wx:key="*this" wx:for="{{banners}}">
      <image src="{{item}}" style="height: 150px;" />
    </swiper-item>
  </swiper>
  <!-- 轮播图指示器 -->
  <view class="dot">
  <!-- 
    index:小圆点的索引
    current：图片的索引
   -->
    <text wx:key="this" wx:for="{{4}}"  class="{{index===current?'active':''}}"></text>
  </view>
</view>

3.轮播图样式文件

.swiper {
  position: relative;
}
 
.dot {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 25rpx;
  bottom: 20rpx;
}
 
.dot text {
  width: 80rpx;
  height: 25rpx;
  border-radius: 20rpx;
  background: peachpuff;
  margin-right: 10rpx;
}
 
/* 小圆点高亮显示 */
.dot text.active{
  background: red;
}

4.轮播图逻辑实现

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    // 用于记录小圆点的索引
    current:0,
    // 轮播图数据
    banners: [
      '../../assets/banners/01.jpg',
      '../../assets/banners/02.jpg',
      '../../assets/banners/03.jpg',
      '../../assets/banners/04.jpg'
    ]
  },
 
  // 图片切换处理事件
  change(e) {
    // e.detail.current：小圆点的索引
    // 更新数据
    this.setData({current:e.detail.current});
  } 
})

5.实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序实战之轮播图（3）

    微信小程序实战之轮播图（3）

    轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 重点说明: 由于微信小程序,整个项目编译后的大小不能超过1M 查看做轮播图功能的一张图片大小都已经有100+k了 那么我们可以把图片放在服务器上,发送请求来获取. index.wxml: 这里使用小程序提供的<swiper>组件 autoplay:自动播放 inter

  • 微信小程序实现Swiper轮播图效果

    微信小程序实现Swiper轮播图效果

    本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_s

  • 微信小程序实现的3d轮播图效果示例【基于swiper组件】

    微信小程序实现的3d轮播图效果示例【基于swiper组件】

    本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f

  • 微信小程序 轮播图swiper详解及实例（源码下载）

    微信小程序 轮播图swiper详解及实例（源码下载）

    微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

  • 微信小程序视图容器（swiper）组件创建轮播图

    本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

  • 微信小程序使用swiper组件实现类3D轮播图

    微信小程序使用swiper组件实现类3D轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限

  • 微信小程序实现轮播图效果

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

    微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper'>滑块视图容器</view> <!-- indicator-dots='true' 是否显示指示点 默认 false indicator-color:指示点颜色 indicator-active-color:选中的指示点颜色 autoplay:是否自动切换 默认:false interval:自动切

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

  • 微信小程序使用swiper组件实现层叠轮播图

    微信小程序使用swiper组件实现层叠轮播图

    本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i

随机推荐