微信小程序——UIswiper

Posted Jason Zhang~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序——UIswiper相关的知识,希望对你有一定的参考价值。

swiper

滑块视图容器,常用来做Banner广告条,简单的控制轮播。其中只可放置swiper-item组件。

常用属性

swiper-item中无特殊属性,作为swiper的子布局、Item的父布局。

  • indicator-dots boolean
    是否显示面板指示点。默认为false不显示。注意:字符串只要不为空就算是true,若要直接指定boolean类型的值需要写成indicator-dots="false"
  • indicator-color color
    指示点颜色
  • indicator-active-color color
    当前选中的指示点颜色。
  • current number
    当前所在滑块的 index,默认为0,很少需要手动设定指定该值为其他值。
  • autoplay boolean
    是否自动切换,默认为false
  • interval number
    自动切换时间间隔,单位为ms,默认为5000。
  • duration number
    滑动切换动画时长,单位为ms,默认为500。
  • circular boolean
    是否采用衔接滑动,默认为false,若设为true,则最后一个滑动到第一个是循环式的而非快速逆向转到第一个,这里建议设为true,体验更好。
  • vertical boolean
    滑动方向是否为纵向,默认为false即横向。横向滑动时指示点在下方,纵向滑动时指示点在右侧。
  • previous-margin、next-margin string
    前边距、后边距,可用于露出前一项、后一项的一小部分。
  • display-multiple-items number
    同时显示的滑块数量,默认为1。设为2时屏幕内同时显示2个item,2个指示器处于选中激活状态。
  • skip-hidden-item-layout boolean
    是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息。默认为false,具体效果还未实践。
  • easing-function string
    指定 swiper 切换缓动动画类型,需要版本库2.6.5才支持,默认值default默认缓动函数、linear线性动画、easeInCubic缓入动画、easeOutCubic缓出动画、easeInOutCubic缓入缓出动画。一般情况不需要使用。
  • bindchange eventhandle
    current 改变时会触发 change 事件,event.detail = current, source。具体效果还未实践。
  • bindtransition eventhandle
    swiper-item 的位置发生改变时会触发 transition 事件,event.detail = dx: dx, dy: dy,需要版本库2.4.3才支持。具体效果还未实践。
  • bindanimationfinish eventhandle
    动画结束时会触发 animationfinish 事件,event.detail 同上。具体效果还未实践。

该笔记实现效果:

本文源码地址,若需git下载该tag版本,请注意命令指定tag。

以上是关于微信小程序——UIswiper的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发怎么实现尖嘴指示框?

微信小程序3缓存与循环

微信小程序 - 自定义swiper(dot)指示点

自定义微信小程序swiper轮播图面板指示点的样式

如何自定义微信小程序swiper轮播图面板指示点的样式

微信小程序自定义swiper轮播图面板指示点的位置