小程序左滑删除 WeUI 中 Slideview(三)

JavaScript05

小程序左滑删除 WeUI 中 Slideview(三),第1张

前两篇 小程序左滑删除 movable-view 和 movable-area(一) 和 小程左滑删除 slide-view(二) 已经介绍了左滑删除的实现原理,接下来看下更好的实现方式,微信团队提供的 WeUI 组件 Slideview,并没有使用可移动区域组件 movable-view 和 movable-area 实现,而是直接使用 view 容器实现。

项目源码: https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/slideview

在全局配置文件 app.json 中引入:

在需要使用 Slideview 的页面 page.json 中引入组件:

WXML 文件中引用 slideview:

JS 文件中需要配置左滑的按钮 slideButtons:

这样即引用了 Slideveiw 组件。

WXML文件:

可以看到,微信团队并没有使用可移动区域组件 movable-view 和 movable-area 实现,而是直接使用 view 容器实现。

并且 slideview 使用 wxs 视图脚本,不用与逻辑层通讯,降低了线程的开销,比 js 效率要高。

由此可以得到,有交互效果类的组件,首先推荐的方案是基于基础的视图容器 view 加上 wxs 视图脚本来实现。

有兴趣的可以读读项目源码: https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/slideview

Action actionCount = new Action("Count", ImageDescriptor.createFromFile(null, "C:/icons/run.gif")) {

public void run() {

try {

FileViewer.this.run(true, true, runnableWithProgress)

} catch (InvocationTargetException e) {

e.printStackTrace()

} catch (InterruptedException e) {

e.printStackTrace()

}

很早的时候看朋友编写一个app前端页面的时候就接触到mui了。然后在最近的一次项目页面开发中正式体验了一番这款框架。

<u style="box-sizing: border-box">先来个预览看看</u>

<iframe height="568" src="http://www.dcloud.io/hellomui" frameborder="0" scrolling="no" style="box-sizing: border-box"></iframe>

追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K。

鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件。

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。 <u style="box-sizing: border-box">查看详细介绍</u>

mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:

<u style="box-sizing: border-box">查看详细介绍</u>

在手机应用中(特别是iOS平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;邮件列表界面,左滑可以删除,右滑可以标注为"已读/未读"状态; mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。