乐趣区

关于后端:YonBuilder移动开发平台AVM框架-封装滑动单元格组件

AVM(Application-View-Model)前端组件化开发模式基于规范 Web Components 组件化思维,提供蕴含虚构 DOM 和 Runtime 的编程框架 avm.js 以及多端对立编译工具,齐全兼容 Web Components 规范,同时兼容 Vue 和 React 语法糖编写代码,编译工具将 Vue 和 React 相干语法糖编译转换为 avm.js 代码。

基于规范 Web Components 组件化思维,兼容 Vue / React 语法个性,通过一次编码,别离编译为 App、小程序代码,实现多端开发。

组件性能介绍
滑动单元格组件原理是主题局部把按钮进行遮挡,按钮通过相对定位,定位在最左边,通过监听触摸事件(touch),判断滑动的方向和计算滑动的间隔以此来断定显示和暗藏按钮。显示和暗藏按钮是通过对主体局部进行 css 的 transform 属性对主体元素进行挪动,以达到显示和暗藏按钮的成果。

示例展现

组件开发
组件文件
easy-swipe-cell.stml

<template>
    <view class="easy-swipe-cell_container" data-id={itemId} @touchstart="start" @touchmove="move" @touchend="end">
        <view class="easy-swipe-cell_content" :style="itemId == touchIdNow?handleSwipe:'transform:translateX(0px)'">
            <text>{itemContent}</text>
        </view>
        <view class="easy-swipe-cell_btn" id="btn">
            <view class="easy-swipe-cell_btn-item" style="background-color: #ee0a24;" data-id={itemId} data-type='delete' @click="clickItem">
                <text class="easy-swipe-cell_btn-item-label"> 删除 </text>
            </view>
            <view class="easy-swipe-cell_btn-item" style="background-color: #07c160;" data-id={itemId} data-type='read' @click="clickItem">
                <text class="easy-swipe-cell_btn-item-label"> 已读 </text>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        name: 'easy-swipe-cell',
        props:{
            itemId:String,
            itemContent:String,
            touchIdNow:String
        },
        data() {
            return{
                startX:0, // 触摸地位
                endX:0, // 完结地位
                moveX: 0, // 滑动时的地位
                disX: 0, // 挪动间隔
                handleSwipe: '',// 滑动时的成果, 动静绑定            
                touchId:''
            }
        },
        mounted (){},
        methods: {start(e){// console.log(JSON.stringify(e.detail)+'开始');
                this.data.startX = e.detail.x;
                this.data.touchId = e.currentTarget.dataset.id;
                this.fire('touch',this.data.touchId);
            },
            move(e){// console.log(JSON.stringify(e.detail)+'挪动');
                let wd=document.getElementById('btn').offsetWidth;
                this.data.moveX = e.detail.x;
                this.data.disX = this.data.startX - this.data.moveX;
                console.log(this.data.disX);
                // 如果是向右滑动或者不滑动,不扭转滑块的地位
                if(this.disX < 0 || this.disX == 0) {this.data.handleSwipe = "transform:translateX(0px)";
                    // 大于 0,示意左滑了,此时滑块开始滑动
                }else if (this.disX > 0) {
                    // 具体滑动间隔我取的是 手指偏移间隔 *5。this.data.handleSwipe = "transform:translateX(-" + this.disX*5 + "px)";
                    // 最大也只能等于按钮宽度
                    if (this.disX*5 >=wd) {this.handleSwipe = "transform:translateX(-" +wd+ "px)";
                    }            
                }
                this.fire('touch',this.data.touchId);
            },
            end(e){//console.log(JSON.stringify(e.detail)+'完结');
                let wd=document.getElementById('btn').offsetWidth;
                let endX = e.detail.x;
                this.disX = this.data.startX - endX;
                // 如果间隔小于按钮一半, 强行回到终点
                if ((this.disX*5) < (wd/2)) {this.data.handleSwipe = "transform:translateX(0px)";
                }else{
                // 大于一半 滑动到最大值
                    this.data.handleSwipe = "transform:translateX(-"+wd+ "px)";
                }
                this.fire('touch',this.data.touchId);
            },
            clickItem(e){this.data.handleSwipe = "transform:translateX(0px)";
                this.fire('clickBtn',{type:e.currentTarget.dataset.type,id:e.currentTarget.dataset.id});
            }
        }
    }
</script>
<style>
    .easy-swipe-cell_content{
        justify-content: center;
        background-color: #ffffff;
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: 0.6s;
        min-height: 50px;
        padding: 10px;
    }
    .easy-swipe-cell_btn{
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-flow: row nowrap;
        height: 100%;
        z-index: 1;
    }
    .easy-swipe-cell_btn-item{    
        height: 100%;
        justify-content: center;
        
    }
    .easy-swipe-cell_btn-item-label{
        color: #ffffff;
        font-size: 15px;
        padding: 0 20px;
    }
</style>

组件应用阐明

本组件是基于 AVM.js 开发的多端组件,通常同时适配 Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。

首先须要登录开发平台,http://www.apicloud.com。通过管制平台右上方的模块 Store 进入,而后抉择 AVM 组件。

找到对应模块点击进入。

也可通过搜寻栏,通过组件名称关键字进行检索。

点击立刻下载下载残缺的组件安装包。

组件压缩包的文件目录如下

也可通过查看模块文档 来理解模块的具体参数,援用的原生模块,注意事项等。

具体在我的项目中的应用步骤是,第一步将压缩文件中的 easy-swiper-cell.stml 文件拷贝到我的项目的 components 目录,通过浏览 readme.md 文档和查看 demo 示例文件 demo-easy-swipe-cell.stml 在须要开发的 stml 文件中,引入组件文件,实现页面的开发。

demo-easy-swipe-cell.stml

<template>
    <scroll-view class="page">
        <safe-area></safe-area>
        <view v-for="(item,index) in list">
            <easy-swipe-cell
                :itemId="item.id"
                :itemContent="item.content"
                :touchIdNow="touchID"
                ontouch="getTouchID"
                onclickBtn="getClickTyeAndId"
            >
            </easy-swipe-cell>
        </view>    
    </scroll-view>
</template>
<script>
    import '../../components/easy-swipe-cell.stml'
    export default {
        name: 'demo-easy-swipe-cell',
        apiready(){//like created},
        data() {
            return{
                list:[{
                    id:'1',
                    content:'对于发展什么流动的告诉'
                },{
                    id:'2',
                    content:'这是一条新的零碎告诉'
                },{
                    id:'3',
                    content:'您有一条新的音讯揭示,请及时查看'
                }],
                touchID:''
            }
        },
        methods: {getTouchID(e){console.log(JSON.stringify(e));
                this.data.touchID = e.detail;
            },
            getClickTyeAndId(e){console.log(JSON.stringify(e));
                api.toast({msg:'以后点击的是'+e.detail.type+'按钮,记录 ID 是'+e.detail.id})
            }
        }
    }
</script>
<style>
    .page {height: 100%;}
</style>

如果在 AVM 组件库中,没有找到理论我的项目中须要的组件,能够本人尝试封装组件。

这是组件化开发的在线文档地址

退出移动版