位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 6.2.2 swiper滑块视图容器
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 6.2.1 view视图容器 下一篇: 6.3.1 icon图标

6.2.2 swiper滑块视图容器

滑块视图容器。一般用于左右滑动或上下滑动,比如banner轮播图,注意是滑动切换而不是滚动。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

属性说明

属性名

类型

默认值

说明

平台差异说明

indicator-dots

Boolean

false

是否显示面板指示点


indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色


indicator-active-color

Color

#000000

当前选中的指示点颜色


active-class

String


swiper-item 可见时的 class

支付宝小程序

changing-class

String


acceleration 设置为    {{true}} 时且处于滑动过程中,中间若干屏处于可见时的class

支付宝小程序

autoplay

Boolean

false

是否自动切换


current

Number

0

当前所在滑块的 index


current-item-id

String


当前所在滑块的 item-id ,不能与    current 被同时指定

支付宝小程序不支持

interval

Number

5000

自动切换时间间隔


duration

Number

500

滑动动画时长

app-nvue不支持

circular

Boolean

false

是否采用衔接滑动


vertical

Boolean

false

滑动方向是否为纵向


previous-margin

String

0px

前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值

app-nvue、字节跳动小程序不支持

next-margin

String

0px

后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值

app-nvue、字节跳动小程序不支持

acceleration

Boolean

false

当开启时,会根据滑动速度,连续滑动多屏

支付宝小程序

disable-programmatic-animation

Boolean

false

是否禁用代码变动触发 swiper 切换时使用动画。

支付宝小程序

display-multiple-items

Number

1

同时显示的滑块数量

app-nvue、支付宝小程序不支持

skip-hidden-item-layout

Boolean

false

是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

App、微信小程序

disable-touch

Boolean

false

是否禁止用户 touch 操作

App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序(只在初始化时有效,不能动态变更)

touchable

Boolean

true

是否监听用户的触摸事件,只在初始化时有效,不能动态变更

字节跳动小程序(uni-app 2.5.5+ 推荐统一使用 disable-touch)

easing-function

String

default

指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic

微信小程序

@change

EventHandle


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


@transition

EventHandle


swiper-item 的位置发生改变时会触发    transition 事件,event.detail = {dx: dx, dy: dy},支付宝小程序暂不支持dx, dy

App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序

@animationfinish

EventHandle


动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source}

字节跳动小程序不支持

change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:

l  autoplay 自动播放导致swiper变化。

l  touch 用户划动引起swiper变化。

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

swiper做左右拖动的长列表问题

l  swiper是单页组件,适合做banner图轮播和简单列表左右滑动。

l  因为性能问题,用swiper做复杂长列表,需要较高的优化技巧以及接受一些限制。

注意事项

l  使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height

l  注意:其中只可放置 <swiper-item> 组件,否则会导致未定义的行为。

l  如果遇到currentcurrent-item-id属性设置不生效的问题参考:组件属性设置不生效解决办法

l  banner图的切换效果和指示器的样式,有多种风格可自定义,可在uni-app插件市场搜索

l  swiperAppvue中、百度支付宝头条QQ小程序中,不支持内嵌videomap等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。

l  同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition... changeAndroid/微信小程序/支付宝为 transition... change transition...

swiper-item

仅可放置在 <swiper> 组件中,宽高自动设置为100%

属性名

类型

默认值

说明

item-id

String


该 swiper-item 的标识符

 

【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 6.2.1 view视图容器 下一篇: 6.3.1 icon图标
毕业设计网             广告联系QQ:45157718(微信同号)