平台兼容性

组件名称：

glance增强型图片表格-小程序组件 glanceImgGrid

组件功能：

• 设置图片分行排列展示
• 设置图片并排展示密度（并排展示间隙）
• 设置图片圆角效果
• 设置是否展示描述信息（包括：营销标签、文字描述、价格信息）
• 默认属性：图片高度、图片圆角、图片密度95、不展示描述信息
• 交互方法：点击图片后触发imgclick方法，父组件实现此方法可用于点击跳转页面或其他业务操作

使用场景：

• 商品或图文导航展示
• 品牌或宣传海报展示
• 商品列表（注意性能）

说明：

组件使用 HBuilderX 开发，仅在 微信小程序 内测试通过

组件属性：

data 数据格式及属性说明

属性	值类型	值示例	默认值	备注
src	String	../../static/1.png 或 网络图片地址		图片地址；注意 此为必要属性 组件内部会检测
rownum	Number	1、2、3、等整数		图片所在行；多行展示图片时图片所在行
imghref	String	图片链接地址		程序内页面地址 或 其他网络内容地址
deslabel	String	9.9包邮		营销标签内容
destext	String	哇哈哈牛奶欢乐开怀		图片文字描述内容
oriprice	String	200		原始价
curprice	String	50		当前价

使用步骤：

1、在vue页面内引入组件（组件放在项目目录下的components目录下）,位置<script>：

注意：上传的压缩文件内组件名前有加前缀 请自行修改

import glanceImgGrid from '@/components/glanceImgGrid.vue';

2、组件引用；位置<export default>：

components: { glanceImgGrid},

3、在模板中需要使用组件的位置，添加组件；位置<template>：

<!-- glanceImgGrid -->
    <glanceImgGrid :imgdes=true :imgradius =true @imgclick="imgclick" :data="[
        { 'src': '../../static/1.png','rownum':1,'imghref':'发财啦','deslabel':'日本进口','destext':'修身短款设计吸汗短款设计吸汗','oriprice':'200','curprice':'50'},
        { 'src': '../../static/1.png','rownum':1,'imghref':'拉拉的','deslabel':'日本进口','destext':'修身短款设计吸汗','oriprice':'200','curprice':'50' },
        { 'src': '../../static/1.png','rownum':1,'imghref':'涛涛涛涛他','deslabel':'日本进口','destext':'修身短款设计吸汗','oriprice':'200','curprice':'50' },
        { 'src': '../../static/5.png','rownum':2,'imghref':'拉拉的'}]">
</glanceImgGrid>

4、与父组件间的通信： 组件主要完成把在点击图片时传递图片绑定的链接地址给父组件，父组件中定义方法处理链接地址跳转指定内容：

imgclick(imghref){
    <!-- 这里处理点击图片后的跳转操作imghref即为图片绑定的链接地址 -->
        <!-- uni.showModal({
            content: imghref
        }) -->
    }

5、示例效果参见图片

拓展使用

• 可结合uni swiper组件使用；实现自动播放展示商品效果
• 可与 glanceLineTextNav 或 glanceLineTextTimerNav 组件组合使用；前者实现单行文本导航，后者加入倒> 计时效果。 这些都是商城首页比较常用的~

特别说明

本人水平有限 努力提升中... :blush:

如有问题，请留言；代码有了，想要的效果可以改到自己满意的为止~