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 组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。
这是组件化开发的在线文档地址
评论