微信小程序swiper轮播图组件使用方法详解

本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下

在components中新建文件夹swiper

components/swiper/swiper.wxml

<!--components/swiper/swiper.wxml-->

<view class="container">
    <swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay>
        <block wx:for="{{swiperList}}" wx:key="index">
            <swiper-item>
                <image class="targetImg" src="{{item}}" mode="aspectFill"></image>
            </swiper-item>
        </block>
    </swiper>
    <!--重置小圆点的样式  -->
    <view class="dots">
        <view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'>
        <!-- <view class="dotsBox" style='width:180rpx'> -->
            <block wx:for="{{swiperList}}" wx:key="index">
                <text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text>
            </block>
        </view>
    </view>
</view>

components/swiper/swiper.js

Component({
  properties: {
    swiperList: {
      type: Array,
      value: []// 默认数据(可以从引用组件处的属性传入该属性值)
    }
  },
  data: {
    currentIndex: 0  // 初始高亮下标
  },
  methods: {
    /* 这里实现控制自定义轮播指示点高亮 */
    swiperChange(e) {     
      this.setData({
        currentIndex: e.detail.current
      })      
    }
  }
})

components/swiper/swiper.wxss

/* components/swiper/swiper.wxss */
.container {
  position: relative;
}

.swiper-box {
  width: 100%;
  height: 364rpx;
}

.targetImg {
  width: 100%;
  height: 100%;
}

/*小圆点  */
.dots {
  width: 100%;
  height: 4rpx;
  display: flex;
  position: absolute;
  bottom: 30rpx;
}

.dotsBox {
  height: 4rpx;
  display: flex;
  margin: 0 auto;
}

/*未选中时的小圆点样式 */
.dot {
  width: 26rpx;
  height: 4rpx;
  border-radius: 2rpx;
  margin-right: 10rpx;
  background-color: #ffffff;
  opacity: 0.4;
}

/*选中以后的小圆点样式  */
.dot-active {
  opacity: 1;
}

在pages文件中引用

json文件中

{
  "usingComponents": {
    "w-swiper":"/components/swiper/swiper"
  }
}

html文件中

<w-swiper swiperList="{{sprList}}" />

js文件中

data:{
    sprList:['/images/img.png','/images/img.png'],
}

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

(0)

相关推荐

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

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

  • 微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

    本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di

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

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

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

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

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

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

  • 微信小程序视图容器(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代码详解

    微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item}}" 报错不要管,不影响页面布局 <view class="container"> <swiper class="swiper1" indicator-dots="{{indicatorDots}}" 是否显示面板指示点

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

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

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

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

  • 微信小程序实现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

随机推荐