# StatusViewJS

**Repository Path**: tian-pan/StatusViewJS

## Basic Information

- **Project Name**: StatusViewJS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# StatusViewJs
自定义不同状态组件


包含两部份：
* statusView是自定义状态图，仿照原StausView组件开发
* stauslayout是仿微信小程序页面状态切换组件
### 效果图
<img src="gifs/statusview1.gif"/>
<img src="gifs/statusview2.gif"/>

### 使用
1、StatusLayout使用(layoutpage.hml)
~~~
<element name="statusLayout" src="../../common/statuslayout/statusLayout.hml"></element>
<div class="container">
    <text class="btn" on:click="clickMethod">测试</text>
    <div class="dataDiv" show="{{ showList }}">
        <list class="todo-wraper">
            <list-item for="{{ datas }}" class="todo-item">
                <text class="todo-title">{{ $item }}</text>
            </list-item>
        </list>
    </div>
    <div show="{{ ! showList }}" class="statusLayoutDiv">
        <statusLayout id="contentView" @event-type="clickMethod"></statusLayout>
    </div>
</div>
~~~
* @event-type是自定义事件，格式固定；
在statusLayout.js中使用this.$emit('eventType')即可实现掉用clickMethod

* 在layoutpage.js中，
var statusLayout = that.$child("contentView")
获取statuslayout的组件对象进行操作

2、StatusView使用(viewpage.hml)
~~~
<element name="statusView" src="../../common/statusview/statusView.hml"></element>

    <div class="statusViewDiv">
        <statusView id="contentView"></statusView>
    </div>
~~~
在js文件中，var statusview = this.$child("contentView")获取组件，实现按钮切换组件动画。

### 运行要求
SDK 6+

### LICENSE
~~~
  Copyright (c) 2021 shanghaozhi
   StatusViewJS 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.
~~~