共计 4262 个字符，预计需要花费 11 分钟才能阅读完成。
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 组件库中，没有找到理论我的项目中须要的组件，能够本人尝试封装组件。
这是组件化开发的在线文档地址
