QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 110|回复: 1

[系列教程] 035 ∞ 视图容器:swiper

[复制链接]
最佳答案
154 
累计签到:690 天
连续签到:218 天
不二如是 发表于 2018-6-12 14:40:10 1101 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2018-6-12 14:40 编辑


                               
登录/注册后可看大图


上一讲我们搞定了scroll-view,本次来看swiper

swiper 滑块视图容器,即轮播组件

稍后我们会制作一个轮播图,在线调用Lorem Picsum

Lorem Picsum教程,参看:实用Tips - 32 - 超好用的#贴图网站 |【Lorem Picsum】

swiper属性:
属性名        类型        默认值        说明
indicator-dots        Boolean        false        是否显示面板指示点
indicator-color        Color        rgba(0, 0, 0, .3)        指示点颜色(基础库 1.1.0 开始支持,低版本需做兼容处理。)
indicator-active-color        Color        #000000        当前选中的指示点颜色(基础库 1.1.0 开始支持,低版本需做兼容处理。)
autoplay        Boolean        false        是否自动切换
current        Number        0        当前所在滑块的 index
current-item-id        String        ""        当前所在滑块的 item-id ,不能与 current 被同时指定(基础库 1.9.0 开始支持,低版本需做兼容处理。)
interval        Number        5000        自动切换时间间隔
duration        Number        500        滑动动画时长
circular        Boolean        false        是否采用衔接滑动
vertical        Boolean        false        滑动方向是否为纵向
previous-margin        String        "0px"        前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值(基础库 1.9.0 开始支持,低版本需做兼容处理。)
next-margin        String        "0px"        后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值(基础库 1.9.0 开始支持,低版本需做兼容处理。)
display-multiple-items        Number        1        同时显示的滑块数量(基础库 1.9.0 开始支持,低版本需做兼容处理。)
skip-hidden-item-layout        Boolean        false        是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息(基础库 1.9.0 开始支持,低版本需做兼容处理。)
bindchange        EventHandle                current 改变时会触发 change 事件,event.detail = {current: current, source: source}
bindanimationfinish        EventHandle                动画结束时会触发 animationfinish 事件,event.detail 同上(基础库 1.9.0 开始支持,低版本需做兼容处理。)


从 1.4.0 开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:
autoplay 自动播放导致swiper变化;
touch 用户划动引起swiper变化;
其他原因将用空字符串表示。


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

swiper-item仅可放置在<swiper/>组件中,用来设置滑块,宽高自动设置为100%:
属性名        类型        默认值        说明
item-id        String        ""        该 swiper-item 的标识符(基础库 1.9.0 开始支持,低版本需做兼容处理。)


index.wxml:
  1. <swiper indicator-dots="{{indicatorDots}}"
  2.   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3.   <block wx:for="{{imgUrls}}">
  4.     <swiper-item>
  5.       <image src="{{item}}" class="slide-image" width="355" height="150"/>
  6.     </swiper-item>
  7.   </block>
  8. </swiper>
  9. <button bindtap="changeIndicatorDots"> indicator-dots(导航点) </button>
  10. <button bindtap="changeAutoplay"> autoplay(自动播放) </button>
  11. <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval(间隔)
  12. <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration(持续时长)
复制代码


index.js:
  1. Page({
  2.   data: {
  3.     imgUrls: [
  4.       'https://picsum.photos/500?image=1027',
  5.       'https://picsum.photos/500?image=1026',
  6.       'https://picsum.photos/500?image=1025'
  7.     ],
  8.     indicatorDots: false,
  9.     autoplay: false,
  10.     interval: 5000,
  11.     duration: 1000
  12.   },
  13.   changeIndicatorDots: function (e) {
  14.     this.setData({
  15.       indicatorDots: !this.data.indicatorDots
  16.     })
  17.   },
  18.   changeAutoplay: function (e) {
  19.     this.setData({
  20.       autoplay: !this.data.autoplay
  21.     })
  22.   },
  23.   intervalChange: function (e) {
  24.     this.setData({
  25.       interval: e.detail.value
  26.     })
  27.   },
  28.   durationChange: function (e) {
  29.     this.setData({
  30.       duration: e.detail.value
  31.     })
  32.   }
  33. })
复制代码

Jun-12-2018 14-25-53.gif


如果在 bindchange 的事件回调函数中使用 setData 改变 current 值。

则有可能导致 setData 被不停地调用,因而通常情况下:
请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。





课后作业


1、根据注释提示写出对应的代码:
  1. //小程序中要创建滑块视图容器(轮播)可以使用什么组件?

  2. //swiper中通过什么元素可以设置滑块?

复制代码



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.3 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-6-25 08:38

快速回复 返回顶部 返回列表