用户可借助此项目在OpenHarmony应用中实现类似微博、微信朋友圈的九宫格图片展示效果。该控件支持宫格布局与全填充布局，可自定义间距，响应点击和长按事件，通过NineGridViewData参数灵活配置图片数据与排列样式。【此简介由AI生成】

当前项目代码仓暂无内容

NineGridImageViewJS

自定义控件 , 用来展示九宫格照片, 就像微博图片和微信朋友圈图片展示一样

效果演示

使用说明

1.在hml注入自定义组件

<element name='ninegridview' src='../../common/ninegridview/NineGridView.hml'></element>

2.hml中注入相关数据事件

<element name='ninegridview' src='../page2/NineGridView.hml'></element>
<div class="container">
    <list style="background-color : aquamarine;" divider="true" cachedcount="20"  >
        <block for="{{ listBean }}">
            <list-item class="item" style="width: 100%;min-height: 0px;"   >
                <ninegridview item-value ="{{$item}}"
                              item-index="{{$idx}}"
                              @item-press1="itemPressNineGrid"
                        ></ninegridview>
            </list-item>
        </block>
    </list>
</div>

3.在js中写入数据和事件

    data: {
        listBean: [
            new NineGridViewData({
                content: "SpanType=1 NUM=1",
                showType: 2, //1 宫格布局  2 全填充布局
                spanType: 1,
                mGap: 1,
                imgDatas: [
                    {
                        imageUrls: "common/photos/photo1.jpg",
                        positionX: 0,
                        positionY: 0,
                        width: 0,
                        height: 0
                    }

                ]
            }),
            new NineGridViewData({
                content: "SpanType=1 NUM=2",
                showType: 2, //1 宫格布局  2 全填充布局
                spanType: 1,
                mGap: 1,
                imgDatas: [
                    {
                        imageUrls: "common/photos/photo2.jpg",
                        positionX: 0,
                        positionY: 0,
                        width: 0,
                        height: 0
                    },
                    {
                        imageUrls: "common/photos/photo2.jpg",
                        positionX: 0,
                        positionY: 0,
                        width: 0,
                        height: 0
                    }

                ]
            }),
        ]
    },

itemPressNineGrid(value) {
        console.info("itemPressNineGrid");
        var name = value.detail.name + "itemIndex =" + value.detail.itemIndex + "  index =" + value.detail.index;
        var detail = value.detail;
        prompt.showToast({
            message: name,
            duration: 1000
        });
        console.info(name);
        console.info("value = " + JSON.stringify(value));

        if (name == "itemClick1") {
            //点击

        } else if (name == "itemLongPress1") {
            //长按

        }

    },

实现思路

通过用户设置的NineGridViewData类型参数，然后在自定义组件中计算好位置，布局，最后展示出来照片排列效果。

entry运行要求

SDK 6+

LICENSE

Copyright (c) 2021 ZhouLisheng
NineGridImageViewJS is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.

项目介绍

NineGridImageViewJS:基于OpenHarmony的九宫格图片展示控件项目