《微信小程序开发从入门到实战》学习九十二

7.1 视图容器组件

7.1.2 scroll-view组件

设置滚动条位置时默认是没有动画过渡的,scroll-with-animation设置为true即可开启动画过渡效果。

enable-back-to-top设置为true,用户单击标题栏可以让scroll-view中的内容快速地回到最顶部。iOS单击标题栏即可,Android需要双击标题栏。

bindscrolltoupper、bindscrolltolower和bindscroll可以绑定事件监听函数。

使用scroll-view组件需要注意:

1、基础库2.4.0版本以下不支持嵌套textarea、map、canvas、video组件。

2、在scroll-view中滚动无法触发onPullDownRefresh

7.1.3 swiper与swiper-item组件

swiper是滑块容器组件,需要与swiper-item组件结合使用。swiper组件内部只能放swiper-item组件,在swiper-item组件中才可放其他内容。

每个swiper-item代表一个滑块的内容,同一时刻swiper组件只显示一个swiper-item的内容,左右滑动可以切换显示不同的swiper-item。

swiper组件的属性如下:

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

indicator-dots:boolen,false,是否显示面板指示点,1.0.0

indicator-color:color,rgba(0,0,0,0.3),指示点颜色,1.1.0

indicator-active-color:color,#000000,当前选中的指示点颜色,1.1.0

current:number,0,当前滑块所在的index,1.0.0

autoplay:boolean,false,是否自动切换,1.0.0

interval:number,5000,自动切换时间间隔,1.0.0

duration:number,500,滑动动画时长,1.0.0

easing-function:string,default,指定swiper切换动画类型,可选值如下:

        default:默认动画

        linear:线性动画

        easeInCubic:缓入动画

        easeOutCubic:缓出动画

        easeInOutCubic:缓入缓出动画

    ,2.6.0

circular:boolean,false,是否采用衔接滑动,1.0.0

vertical:boolean,false,滑动方向是否为纵向,1.0.0

previous-margin:string,0px,前边距,可用于露出前一项的一小部分,接受px和rpx,1.9.0

next-margin:string,0px,后边距,可用于露出后一项的一小部分,接受px和rpx,1.9.0

display-multiple-item:number,1,同时显示的滑块数量,1.9.0

bindchange:eventhandle,,current改变时会触发chage事件,event.detail={current.source},source表示导致变更的原因,可能的值如下:

        autoplay:自动播放

        touch:用户滑动

        空字符串:其他原因

    ,1.0.0

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

bindanimationfinish:eventhandle,,动画结束时会触发animationfinish事件,event.detail同上,1.9.0

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容