swiper.wxml：
<!--components/swiper/swiper.wxml--> <view class="swiper_view" style="{{swiper_view_style}}"> <swiper class="swiper" style="{{swiper_style}}" display-multiple-items="{{swiper_display_multiple_items}}" indicator-dots="{{swiper_indicator_dots}}" indicator-color="{{swiper_indicator_color}}" indicator-active-color="{{swiper_indicator_active_color}}" autoplay="{{swiper_autoplay}}" current="{{swiper_current}}" interval="{{swiper_interval}}" duration="{{swiper_duration}}" previous-margin="{{swiper_previous_margin}}" next-margin="{{swiper_next_margin}}" snap-to-edge="{{swiper_snap_to_edge}}" vertical="{{swiper_vertical}}" easing-function="{{swiper_easing_function}}" bindchange='swiper_bindchange' bindtransition='swiper_bindtransition' bindanimationfinish='swiper_bindanimationfinish' > <swiper-item class="swiper_item" style="{{swiper_item_style}}" wx:for="{{swiper_item_items}}" wx:for-item="item" wx:for-index="index" wx:key="{{index}}" item-id="{{swiper_item_id}}" skip-hidden-item-layout="{{swiper_item_skip_hidden_item_layout}}" > <view class="image_view" style="visibility:{{item.visibility===undefined?'visible':item.visibility}}" style="{{image_view_style}}"> <image class="image" style="{{image_style}}" src="{{item.url}}" mode="{{image_mode}}" show-menu-by-longpress="{{image_show_menu_by_longpress}}" webp="{{image_webp}}" lazy-load="{{image_lazy_load}}" binderror="{{image_binderror}}" bindload="{{image_bindload}}"> </image> </view> </swiper-item> </swiper> </view>
swiper.js:
// components/swiper/swiper.js Component({ /** * 组件的属性列表 */ properties: { // swiper-item 元素列表 swiper_item_items: Array, // 组件宽度 Number, // 组件高度 height:Number, // swiper_view样式，可不传 swiper_view_style:{type:String||undefined,value:undefined}, // swiper_item_style样式，可不传 swiper_item_style:{type:String||undefined,value:undefined}, // image_view_style样式，可不传 image_view_style:{type:String||undefined,value:undefined}, // image_style样式，可不传 image_style:{type:String||undefined,value:undefined} }, /** * 组件的初始数据 */ data: { // swiper同时显示的swiper-item数量 swiper_display_multiple_items: 1, // swiper是否显示面板指示点 swiper_indicator_dots: true, // swiper指示点颜色 swiper_indicator_color: "rgba(25, 66, 0, .8)", // swiper选中时指示点的颜色 swiper_indicator_active_color: "#567821", // swiper是否自动播放 swiper_autoplay: true, // swiper现在显示的swiper-item的索引 swiper_current: 0, // swiper自动切换时间间隔 swiper_interval: 5000, // swiper滑动动画时长 swiper_duration: 5000, // swiper是否采用衔接滑动 swiper_circular: false, // 与上一个swiper-item的间隔 swiper_previous_margin: "20rpx", // 与下一个swiper-item的间隔 swiper_next_margin: "20rpx", // 是否纵向滑动 swiper_vertical:false, // 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素(true时头一个item会紧靠在页面边缘，false时头一个item会有间隙) swiper_snap_to_edge:false, // swiper切换时所用的动画 // default 默认缓动函数 // linear 线性动画 // easeInCubic 缓入动画 // easeOutCubic 缓出动画 // easeInOutCubic 缓入缓出动画 swiper_easing_function:"easeInOutCubic", // swiper-item 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 swiper_item_skip_hidden_item_layout:true, // 该 swiper-item 的标识符 swiper_item_id:"index", // image 缩放模式 // scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 // aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 // aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 // widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 // heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3 // top 裁剪模式，不缩放图片，只显示图片的顶部区域 // bottom 裁剪模式，不缩放图片，只显示图片的底部区域 // center 裁剪模式，不缩放图片，只显示图片的中间区域 // left 裁剪模式，不缩放图片，只显示图片的左边区域 // right 裁剪模式，不缩放图片，只显示图片的右边区域 // top left 裁剪模式，不缩放图片，只显示图片的左上边区域 // top right 裁剪模式，不缩放图片，只显示图片的右上边区域 // bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 // bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域 image_mode:"aspectFit", // image是否长按显示识别二维码菜单 image_show_menu_by_longpress:true, // image 是否支持webp image_webp:true, // image 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 image_lazy_load:true }, /** * 组件的方法列表 */ methods: { // current 改变时会触发 change 事件，event.detail = {current, source} // change事件 source 返回值 // 从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下： // autoplay 自动播放导致swiper变化； // touch 用户划动引起swiper变化； // 其它原因将用空字符串表示。 swiper_bindchange:function(event){ }, // swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} swiper_bindtransition:function(){ }, // 动画结束时会触发 animationfinish 事件，event.detail 同上 swiper_bindanimationfinish:function(){ }, // 图片加载错误回调 image_binderror:function(){ }, // 图片加载完成回调 image_bindload:function(){ } }, options:{ // 在组件定义时的选项中启用多slot支持 multipleSlots:true } })