“小程序轮播组件”的版本间的差异
来自CloudWiki
(→案例) |
|||
第81行: | 第81行: | ||
<nowiki><view> | <nowiki><view> | ||
<swiper indicator-dots="{{true}}" | <swiper indicator-dots="{{true}}" | ||
− | autoplay="true"> | + | autoplay="{{true}}"> |
<swiper-item> | <swiper-item> | ||
<image src="/images/bestplayers.png"></image> | <image src="/images/bestplayers.png"></image> | ||
第94行: | 第94行: | ||
</view></nowiki> | </view></nowiki> | ||
− | indicator-dots: | + | indicator-dots:表示点是否显示。 |
autoplay:自动播放 | autoplay:自动播放 | ||
+ | |||
+ | 这里true要加<nowiki>{{}}</nowiki> 否则true 被认为是字符串 | ||
+ | |||
+ | 这里加<nowiki>{{}}</nowiki> 是一种良好编码习惯。 | ||
效果图: | 效果图: |
2021年4月21日 (三) 14:59的版本
swiper组件
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为
autoplay,interval,indicator-dots
属性 类型 默认值 必填 说明 最低版本 indicator-dots boolean false 否 是否显示面板指示点 1.0.0 indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0 indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0 autoplay boolean false 否 是否自动切换 1.0.0 current number 0 否 当前所在滑块的 index 1.0.0 interval number 5000 否 自动切换时间间隔 1.0.0 duration number 500 否 滑动动画时长 1.0.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-items number 1 否 同时显示的滑块数量 1.9.0 skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 1.9.0 easing-function string "default" 否 指定 swiper 切换缓动动画类型 2.6.5 bindchange eventhandle 否 current 改变时会触发 change 事件,event.detail = {current, source} 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
swiper-item
仅可放置在swiper组件中,宽高自动设置为100%。
属性 类型 默认值 必填 说明 最低版本 item-id string 否 该 swiper-item 的标识符 1.9.0
案例
入门案例:
<view> <swiper> <swiper-item>Content1</swiper-item> <swiper-item>Content2</swiper-item> <swiper-item>Content3</swiper-item> </swiper> </view>
改进版:
<view> <swiper> <swiper-item> <image src="/images/bestplayers.png"></image> </swiper-item> <swiper-item> <image src="/images/lpl.png"></image> </swiper-item> <swiper-item> <image src="/images/jumpfly.png"></image> </swiper-item> </swiper> </view>
wxss:
swiper{ width:100%; height:460rpx; } swiper image{ width:100%; height:460rpx; }
又改进版:
<view> <swiper indicator-dots="{{true}}" autoplay="{{true}}"> <swiper-item> <image src="/images/bestplayers.png"></image> </swiper-item> <swiper-item> <image src="/images/lpl.png"></image> </swiper-item> <swiper-item> <image src="/images/jumpfly.png"></image> </swiper-item> </swiper> </view>
indicator-dots:表示点是否显示。
autoplay:自动播放
这里true要加{{}} 否则true 被认为是字符串
这里加{{}} 是一种良好编码习惯。
效果图:
网页文件index.wxml
<!--pages/swiper/swiper.wxml--> <view> <swiper autoplay="true" interval="2000" indicator-dots="true" > <block wx:for="{{background}}" wx:key='swip' > <swiper-item> <view class='si {{item}}'></view> </swiper-item> </block> </swiper> </view>
<block>标记 这是一个块元素,
wx:key :给循环加个标记。
CSS文件
/* pages/swiper/swiper.wxss */ .si{ display:block; height:150px; } .a{ background-color:yellow; } .b{ background-color:red; } .c{ background-color:blue; }
JS文件(数据绑定)
// pages/swiper/swiper.js Page({ /** * 页面的初始数据 */ data: { background: ['a', 'b', 'c'] },