# xing-weapp-component

**Repository Path**: hihopeorg/xing-weapp-component

## Basic Information

- **Project Name**: xing-weapp-component
- **Description**: 基础组件扩展库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2022-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xing-weapp-component

>功能：x-image组件支持定制预显示图片以及加载失败显示图片等功能,x-scroll-view 组件支持scroll-view的下拉刷新和上拉加载。

#### 效果演示
![gif](screenshot/x-image.gif)

![gif](screenshot/x-scroll-view.gif)

## 下载安装
```shell
npm install @ohos/xing-weapp-component --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

#### 安装教程
1. 下载xing-weapp-component源码。
2. 拷贝xing-weapp-component源码中的 entry/src/main/js/default/xing_component 文件夹到自己的 src/main/js/default/ 文件夹下。
3. 在自己项目中引用拷贝的文件。

#### 使用说明：

第一步： 在hml文件中引入组件；
```html
    <element name="x-image" src="../../xing_component/x_image.hml"></element>
    <element name="x-scroll-view" src="../../xing_components/x-scroll-view.hml"></element>
```

第二步：分别创建组件节点：
```html
    <x-image class="x-image-style" src="http://www.fourzero.four" broken-image="/sources/broken-image.png"></x-image>
    <x-scroll-view nomore="{{nomore}}" refreshing="{{refreshing}}" @loadmore="loadMore" @pulldownrefresh="pullRefresh">
        <div for="{{colors}}" >
            <text class="item" style="background-color: {{$item}};">
                {{$idx + 1}}. {{$item}}
            </text>
        </div>
    </x-scroll-view>
```

 - 注意:导入请求入口js文件时需要根据自己的项目路径;具体详细使用方法可查看项目的案例。

### xing-image

|属性名|类型|默认值|说明|
|---|---|---|---|
|src|String||同image|
|mode|String|scaleToFill|image|
|placeholder-image|String|data: image / png; base64, iVBOR...|占位图，支持url、base64、本地目录|
|broken-image|String||图片加载失败时显示图片，支持url、base64、本地目录，若未设置则不显示|

### xing-scroll-view

|属性名|类型|默认值|说明|
|---|---|---|---|
|pull-down-height|Number|60|下拉到多少高度时可刷新，单位为 `px` |
|pull-text|String|下拉可以刷新|下拉还不能刷新时显示的文字|
|release-text|String|松开立即刷新|下拉至可刷新时显示的文字|
|loading-text|String|正在刷新数据中|刷新时显示的文字，尾部会自动接 `...` |
|finish-text|String|刷新完成|刷新完成时显示的文字|
|loadmore-text|String|正在加载更多数据|上拉加载更多时显示的文字|
|nomore-text|String|已经全部加载完毕|上拉加载无数据后显示的文字|
|refreshing|Boolean|false|是否正在刷新|
|nomore|Boolean|false|是否没有更多数据（加载完毕）|
|pulldownrefresh|HandleEvent| |当下拉刷新时触发|
|loadmore|HandleEvent| |当滚动到底部时触发|

## 接口说明
1. onInit() #占位图显示，支持url、base64、本地目录
2. _onError() #图片加载失败时显示图片
3. onScroll() #上拉加载
4. onScrollBottom() #下拉刷新

- 不支持lazy load模式

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- wx-statuslayout 
|     |---- entry  # 示例代码文件夹
            |---- src
                |----main         
                    |----js
                        |----MainAbility
                            |----pages
                                |----index
                                    |----index.css   
                                    |----index.hml              
                                    |----index.js    
       |----xing_component
            |----src
                |----main
                    |----js
                        |----components
                            |----x_image.css
                            |----x_image.hml
                            |----x_image.js
                            |----x_scroll_view.css
                            |----x_scroll_view.hml
                            |----x_scroll_view.js
                                
|     |---- README.MD  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/xing-weapp-component/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/xing-weapp-component/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/hihopeorg/xing-weapp-component/blob/master/LICENSE) ，请自由地享受和参与开源。