注册登录

swiper中文文档-swiper小程序开发示例

2020-09-14|HiShop
导读:swiper中文文档 基础库 1.0.0 开始支持,低版本需做兼容处理。 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性类型默认值必填说明最低版本 indicator-dotsboo...

  swiper中文文档

  基础库 1.0.0 开始支持,低版本需做兼容处理。

  滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

  属性类型默认值必填说明最低版本

  indicator-dotsbooleanfalse否是否显示面板指示点1.0.0

  indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0

  indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0

  autoplaybooleanfalse否是否自动切换1.0.0

  currentnumber0否当前所在滑块的 index1.0.0

  intervalnumber5000否自动切换时间间隔1.0.0

  durationnumber500否滑动动画时长1.0.0

  circularbooleanfalse否是否采用衔接滑动1.0.0

  verticalbooleanfalse否滑动方向是否为纵向1.0.0

  previous-marginstring"0px"否前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0

  next-marginstring"0px"否后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0

  snap-to-edgeboolean"false"否当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素2.12.1

  display-multiple-itemsnumber1否同时显示的滑块数量1.9.0

  easing-functionstring"default"否指定 swiper 切换缓动动画类型2.6.5

  bindchangeeventhandle否current 改变时会触发 change 事件,event.detail = {current, source}1.0.0

  bindtransitioneventhandle否swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3

  bindanimationfinisheventhandle否动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

  easing-function 的合法值

  值说明最低版本

  default默认缓动函数

  linear线性动画

  easeInCubic缓入动画

  easeOutCubic缓出动画

  easeInOutCubic缓入缓出动画

  change事件 source 返回值

  从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

  autoplay 自动播放导致swiper变化;

  touch 用户划动引起swiper变化;

  其它原因将用空字符串表示。

  Bug & Tip

  tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

  Page({

  onShareAppMessage() {

  return {

  title: 'swiper',

  path: 'page/component/pages/swiper/swiper'

  }

  },

  data: {

  background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

  indicatorDots: true,

  vertical: false,

  autoplay: false,

  interval: 2000,

  duration: 500

  },

  changeIndicatorDots() {

  this.setData({

  indicatorDots: !this.data.indicatorDots

  })

  },

  changeAutoplay() {

  this.setData({

  autoplay: !this.data.autoplay

  })

  },

  intervalChange(e) {

  this.setData({

  interval: e.detail.value

  })

  },

  durationChange(e) {

  this.setData({

  duration: e.detail.value

  })

  }

  })

1、9月9日晚,为期一个月的乐享消费 美好生活2020三亚市消费促进月活动在青春颂广场正式启动。
2、917囤票节活动时间 2020年9月10日0点到2020年9月22日23:59:59。

小程序产品推荐
  • HiShop小程序商城开发
    提供零售小程序、多用户小程序、社区团购小程序、o2o小程序、分销小程序、抖音/头条小程序等多种业态的小程序开发解决方案,助力企业降低获客成本,实现流量快速变现,功能强大的小程序商城系统帮助商家快速抢占社交电商红利。详情
<
在线咨询