1. 官方文档指南
- 滑块视图容器: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
- Image图片组件:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
2. swiper视图容器
-
功能描述:
滑块视图容器。其中只可放置swiper-item组件
,否则会导致未定义的行为 -
通用属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
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 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.9 |
更多详情,请阅读官方文档
3. image 媒体组件
- 功能描述:
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。
- 使用 svg 格式且 mode=scaleToFill 时,WebView 会居中(除非 svg 里加上 preserveAspectRatio=“none”),Skyline 则会撑满
- svg 格式不支持百分比单位
- svg 格式不支持
- 通用属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | - | 否 | 图片资源地址 | 1.0.0 |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
show-menu-by-longpress | boolean | false | 否 | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单。 | 2.7.0 |
binderror | eventhandle | - | 否 | 当错误发生时触发,event.detail = (errMsg) | 1.0.0 |
bindload | eventhandle | - | 否 | 当图片载入完毕时触发,event.detail = {height, width} | 1.0.0 |
mode
合法值
合法值 | 说明 | 最低版本 |
---|---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | - |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | - |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | 2.10.3 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 | 2.10.3 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 | 2.10.3 |
top | 截取模式,不缩放图片,只显示图片的顶部区域。仅 Webview 支持。 | 2.10.3 |
bottom | 截取模式,不缩放图片,只显示图片的底部区域。仅 Webview 支持。 | 2.10.3 |
center | 截取模式,不缩放图片,只显示图片的中间区域。仅 Webview 支持。 | 2.10.3 |
left | 截取模式,不缩放图片,只显示图片的左边区域。仅 Webview 支持。 | 2.10.3 |
right | 截取模式,不缩放图片,只显示图片的右边区域。仅 Webview 支持。 | 2.10.3 |
top left | 截取模式,不缩放图片,只显示图片的左上边区域。仅 Webview 支持。 | 2.10.3 |
top right | 截取模式,不缩放图片,只显示图片的右上边区域。仅 Webview 支持。 | 2.10.3 |
bottom left | 截取模式,不缩放图片,只显示图片的左下边区域。仅 Webview 支持。 | 2.10.3 |
bottom right | 截取模式,不缩放图片,只显示图片的右下边区域。仅 Webview 支持。 | 2.10.3 |
温馨提示
1. image组件默认宽度320px、高度240px
2. image组件进行缩放时,计算出来的宽高可能带有小数,在不同webview内核下渲染可能会被抹去小数部分
4. 代码实现过程
- index.wxml
<!--index.wxml-->
<navigation-bar title="购物商城" back="{{false}}" color="#ffffff" background="#f3514f"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view class="swiper">
<swiper autoplay="true" indicator-dots="true" indicator-active-color="#f3514f">
<swiper-item>
<image src="https://img.zcool.cn/community/0101d75d709f3ca801202f177e96ba.gif" mode="aspectFill"/>
</swiper-item>
<swiper-item>
<image src="https://img.zcool.cn/community/012b4858bd040ea801219c77167f68.jpg@1280w_1l_2o_100sh.jpg" mode="aspectFill" />
</swiper-item>
<swiper-item>
<image src="https://i2.wp.com/img-blog.csdnimg.cn/20200517184939657.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0,size_16,color_FFFFFF,t_70" mode="aspectFill" />
</swiper-item>
<swiper-item>
<image src="https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
</scroll-view>
- index.wxss
swiper{
height: 360rpx;
}
swiper-item image{
width: 100%;
height: 100%;
}