# tui-gallery 图片预览
介绍
gallery,类似uni.previewImage(wx.previewImage)的展示效果。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiGallery from "@/components/thorui/tui-gallery/tui-gallery.vue"
export default {
components:{
tuiGallery
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-gallery": "/components/thorui/tui-gallery/tui-gallery"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
通过 urls
属性传入图片信息,show
属性控制显示隐藏。
<!--uni-app-->
<tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery>
<!--微信小程序-->
<tui-gallery urls="{{urls}}" show="{{show}}" bindhide="hide"></tui-gallery>
# Slots
none
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
urls | Array | 图片数据 | [ ] |
showDelete | Boolean | 是否显示删除按钮 | false |
show | Boolean | 是否显示预览弹层 | false |
current | Number | 当前显示的图片索引 | 0 |
hideOnClick | Boolean | 点击时是否触发hide事件 | true |
urls 属性参数说明
//数据格式如下,其中src为图片地址,desc为图片描述文字(如果没有描述,可不传)
[{
src:'https://thorui.cn/reward.jpg',
desc:'欢迎使用ThorUI,文字描述文字描述文字描述'
},{
src:'https://thorui.cn/img_banner_2.png',
desc:'欢迎使用ThorUI~'
}]
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 图片左右切换时触发 | { current : 当前图片索引 } |
delete | 删除图片时触发 | { url : 图片url , index : 被删除图片索引 } |
hide | 点击图片时触发,通知隐藏 | { } |
# 预览
请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |