Gallery 画廊 
概述
Gallery 画廊，用于预览图片或其他操作。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiGallery from "@/components/firstui/fui-gallery/fui-gallery.vue"
export default {
components:{
fuiGallery
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用
通过 urls 属性设置图片数据，show 属性控制显示隐藏，@hide 为点击时触发，控制 show 进行隐藏。
<!--按钮用于触发显示预览-->
<fui-button type="gray" width="400rpx" height="84rpx" text="自定义Gallery" bold :margin="['24rpx']" @click="showGallery"></fui-button>
<fui-gallery :urls="urls" :show="show" @hide="hideGallery"></fui-gallery>
1
2
3
4
2
3
4
data() {
return {
urls: [{
src: '/static/images/common/logo.png',
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
}, {
src: '/static/images/component/img_goods_3x.jpg'
}, {
src: '/static/images/component/img_bg_poster.png'
}],
show: false
}
},
methods: {
showGallery() {
this.show = true
},
hideGallery() {
this.show = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| urls | Array | 图片数据，具体格式见下方说明 | [ ] | - |
| show | Boolean | 是否显示预览 | false | - |
| current | Number, String | 当前所在滑块的索引值 | 0 | - |
| ellipsis | Boolean | 文字描述超出一行是否隐藏省略 | false | - |
| zIndex | Number, String | 层级z-index值 | 1001 | Nvue端不支持，默认越靠后的元素层级越高 |
| safeArea V1.5.0+ | Boolean | 是否适配底部安全区 | true | - |
// urls 数据格式说明
//第一种格式，字符串数组
urls:['/static/images/common/logo.png','/static/images/common/logo.png']
//第二种格式，以下为约定属性，其他属性值可自行扩展
urls:[{
//图片链接地址
src: '/static/images/common/logo.png',
//文字描述，可选
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
}]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 图片左右切换时触发 | { index:当前滑块索引值 } |
| @hide | 点击图片或滑块时触发，通过控制属性 show 关闭预览 | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。