# 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
属性控制显示隐藏。
<template>
<view class="container">
<view class="tui-page__bd">
<tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery>
<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="previewImage">预览大图</tui-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
urls: [{
src:'https://thorui.cn/img/reward.jpg',
desc:'欢迎使用ThorUI,文字描述文字描述文字描述'
},{
src:'https://thorui.cn/extend/cafe/img_banner_2.png',
desc:'欢迎使用ThorUI~'
}],
show: false
};
},
methods: {
previewImage() {
this.show = true
},
hide(){
this.show = false
}
}
};
</script>
<style>
</style>
<!-- 示例中使用到的组件请自行引入 -->
<view class="container">
<view class="tui-page__bd">
<tui-gallery urls="{{urls}}" show="{{show}}" bindhide="hide"></tui-gallery>
<tui-button type="gray-primary" size="{{34}}" bold width="372rpx" height="84rpx" margin="40rpx auto" bindclick="previewImage">预览大图</tui-button>
</view>
</view>
// data 数据 及 方法
Page({
data: {
urls: [{
src:'https://thorui.cn/img/reward.jpg',
desc:'欢迎使用ThorUI,文字描述文字描述文字描述'
},{
src:'https://thorui.cn/extend/cafe/img_banner_2.png',
desc:'欢迎使用ThorUI~'
}],
show: false
},
previewImage() {
this.setData({
show:true
})
},
hide(){
this.setData({
show:false
})
}
})
// Make sure to add code blocks to your code group
TIP
点击图片时会触发 hide
事件,需自行在事件中设置 show
属性为 false
以关闭预览。
# Slots
插槽名称 | 插槽说明 |
---|---|
- | - |
# 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
注:uni-app端绑定事件使用@前缀,如@change;微信小程序原生使用bind前缀,如bindchange
事件名 | 说明 | 回调参数 |
---|---|---|
change | 图片左右切换时触发 | { current : 当前图片索引 } |
delete | 删除图片时触发 | { url : 图片url , index : 被删除图片索引 } |
hide | 点击图片时触发,通知隐藏 | { } |
# 预览
请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |