# swiplist

**Repository Path**: litz/swiplist

## Basic Information

- **Project Name**: swiplist
- **Description**: 可自定义侧滑列表菜单
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-20
- **Last Updated**: 2021-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# swipelist


#### 组件介绍

- 组件名称：swipelist
- 功能：ohos list侧滑menu
- 开发版本：sdk6，DevEco Studio2.2 Beta1

#### 效果演示

![效果图](./pre/preview.gif)   ![效果图](./pre/pre2.png) 

#### 代码模块说明
1.关键模块pages下swipelist与swipelist-item模块 

2.在页面引入组件
```hml
    <element name='swipelist' src='../../pages/swipelist/swipelist.hml'></element>
    <div class="container">
        <swipelist  comp-data="{{todolist}}" comp-btndata="{{itemBtnArr}}" comp-isleft="true"
                    @event-itemclick="itemClick"
                    @event-itembtnclick="itemBtnClick"></swipelist>
    </div>
```


此时需注意由于ohos暂无slot，使用element嵌套element方案替代，swipelist-item为行视图
```hml
    <!--compObj为接收数据对象-->
    <div class="container">
        <text class="item-left">{{compObj.title}} {{compIndex}}</text>
        <text class="item-right">{{compObj.date}}</text>
    </div>
```
3.属性
```hml
    默认menu在右边设置, 添加属性comp-isleft="true" menu显示在左边，如上图2    

    comp-data="{{todolist}}"
    <!--todolist item 显示数据-->
    for (var i = 0; i < 14; i++) {
        var items = {
            date : '2021-12-31 20:00:0'+i,
            title : "item ",
            itemMoveX:0,
        }
        this.todolist.push(items);
    } 

    comp-btndata="{{itemBtnArr}}"
    <!--itemBtnArr 侧滑按钮定义-->
    itemBtnArr:[
        {
            name:'编辑',
            background:'#00aaff',
            color:'#ffffff',
            width:80,
        },
        {
            name:'删除',
            background:'#ff5500',
            color:'#fffffff',
            width:120,
        },
        {
            name:'收藏',
            background:'#f1215c',
            color:'#868282',
            width:80,
        }
    ],  

    @event-itemclick="itemClick" 定义item点击事件
    @event-itembtnclick="itemBtnClick" 定义侧滑menu点击事件
```
4.事件处理
```
    itemClick(e){
        //e.detail.itemobj为当前item数据对象 
        //e.detail.index为当前item下标
        prompt.showToast({
            message: e.detail.itemobj.title + e.detail.index +" "+ e.detail.itemobj.date
        })
    },
    itemBtnClick(e){
        //e.detail.btnObj为每个按钮数据对象
        //e.detail.index 为当前item view下标
        prompt.showToast({
            message:"item "+e.detail.index +" "+ e.detail.btnObj.name
        })
    }
```
5.原始未封装样式swipelist：详情可参考pages/index2 
```
    修改即可预览
    "js": [
      {
        "pages": [
          "pages/index2/index"
        ],
    ]

    <div class="container">
        <list class="item-wraper "  divider="true" >
            <list-item for="{{todolist}}" class="todo-item " tid="id">
                <stack class="todo-item"  on:touchstart="touchstart({{$idx}})"
                       on:touchmove="touchmove" on:touchend="touchend"   >
    
                    <div style="transform:translateX({{($item.itemMoveX)+'px'}});" >
                        <!--item view-->
                        <div>
                            <text class="todo-left">{{$item.title}} {{$idx}}</text>
                            <text class="todo-right">{{$item.date}}</text>
                        </div>
                    </div>
    
                    <!--左边-->
                    <div if="{{isLeft}}" style="transform:translateX({{($item.itemMoveX-btnAllViewWidth)+'px'}})">
                        <div for="{{itemBtnArr}}" onclick="itemClick({{$item}})" >
                            <text class="todo-action"  style="background-color:{{$item.background}};
                                    color:{{$item.color}};width:{{$item.width}};">{{$item.name}} </text>
                        </div>
                    </div>
                    <!--右边-->
                    <div if="{{!isLeft}}" style="transform:translateX({{($item.itemMoveX+360)+'px'}})">
                        <div for="{{itemBtnArr}}" onclick="itemClick({{$item}})" >
                            <text class="todo-action"  style="background-color:{{$item.background}};
                                    color:{{$item.color}};width:{{$item.width}};">{{$item.name}} </text>
                        </div>
                    </div>
    
                </stack>
            </list-item>
        </list>
    </div>

```
6.可参考点
``` 
item下标获取方式 
    $idx  
    this.index = msg.target.children[0].watchers[0].vm.$idx;//触摸下标此方法同样有效,可参考获取其他参数
js中 触摸事件传多个参数 +事件对象获取
    hml中传参 touchstart({{$idx}})
    js中使用  touchstart(index,e) e 即为触摸事件对象
动态绑定，三目运算，暂不支持
    使用数据对象直接替换
slot临时替代方案
    使用element嵌套element替代，优点可读性强，缺点不够灵活
自定义控件封装使用，传参，设置监听事件，及数据

 
```