更新记录
1.0.1(2025-04-03) 下载此版本
修复部分CSS样式出现错位情况
1.0(2025-04-03) 下载此版本
新版本发布
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
👉 插件使用说明
本插件开发语言为: Vue3、Vue2 开发(未使用CSS预处理,开箱即用),插件内CSS样式默认采用 "rpx" 格式, 如果不懂的可以去查阅教程。不修改不影响使用!
组件语法版本指引 | |
---|---|
Vue3 | 当前文档 |
Vue2 | 点我跳转 |
👉 使用方法
Vue3版本使用示例代码:
<!-- template 页面 -->
<JhImageList radius :column="4" :list="list"></JhImageList>
<!-- script setup -->
import JhImageList from '@/components/jh-image-list/jh-image-list.vue'
let list = reactive([{
url: "https://ts1.tc.mm.bing.net/th/id/OIP-C.OSFH3hIukHqh-qrOvIfUWgAAAA?w=224&h=278&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
})
Arrt 参数
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
webp | Boolean | 否 | false | 图片webp支持 |
draggable | Boolean | 否 | false | 图片是否可拖动 |
lazyLoad | Boolean | 否 | false | 图片是否懒加载 |
radius | Boolean | 否 | false | 图片是否圆角 |
column | Number | 是 | 2 | 每列数量 |
list | Array | 是 | [] | 列表 |
Events 事件
事件名称 | 说明 |
---|---|
click | 当点击单元格时(与tap事件选一,按需求选择其中一个点击事件) |
tap | 当点击单元格时(与click事件选一,按需求选择其中一个点击事件) |
☕ 赏一口饭给作者 ☕
🧏♂️ Call Me 联系作者 🧏♂️
如果有重大BUG可以紧急联系我,如果小问题请直接评论即可,按照问题热度选择性更新