Mbos开发——列表增加批量操作功能

效果对比图

扩展开发前 VS 扩展开发后：

1 绑定唯一标识属性

参考如图步骤，打开HTML源码

当前数据qid为唯一标识，给类名为“gridItem”的元素绑定“qid”属性，如图：

2 增加列表复选框

2.1 增加复选框元素

2.2 JS文件处理复选框背景图片路径，点击事件

2.3 CSS文件增加样式

2.4 上传图片

2.5 效果如图

因为底部批量操作按钮区域还未添加，会如下图报错，可先忽略报错

3 底部增加批量操作区域

3.1 引用外部文件

为了便于开发，引入vue相关文件，vue.min.js、vue-router.js、vant@2.12.54.min.js、vant@2.12.54.css。

Js文件以vue.min.js为例：

相同的操作，引用其他两个文件：

引用css文件：

引用后：

3.2 新增HTML片段

增加代码：

3.3 JS 代码

在pageinit方法中，初始化vue部分代码：

组件footer代码：

3.4 CSS样式

3.5 效果如图

4 单条数据操作按钮

4.1 列表HTML源码中增加代码

4.2 JS定义按钮点击事件

4.3 CSS样式

4.4 效果如图

5 已应用轻应用

招聘GO