weixin_43930421的博客

在小程序、H5等移动端中，列表的加载不同于PC端的表格，数据是分页显示的。在移动端中，一般都是上滑加载新数据，但是不会切换显示已加载的上一页数据，而是拼接到底部。该篇博客使用 Vue + elementUI 技术栈实现。

微信小程序中可以使用 editor 组件进行富文本编辑，但在钉钉小程序中还没有类似组件可以使用。相信程序员大都实现过在 web 页面上进行富文本编辑，那么是不是可以通过小程序的 webview 进行嵌入 H5 页面实现呢？答案是肯定的，如下便是笔者实现的效果图。实现这个页面主要难点在于图片的选择和富文本的初始化数据，其他像富文本样式功能的渲染和在 web 中的使用一样。h5 富文本页面首先准备一个 web 网页，这个页面上实现富文本编辑器的布局，以及如上图的 “确定” 按钮。我在这里使用的是 w

实现类似于如下图的无限极部门选择菜单。在文件夹 components 中新建组件 组件。infiniteSelect.axml<view class="bg-white"> <view class="padding flex" style="border-top:0.5px solid rgb(238, 238, 238);"> <view class="flex-treble" onTap="select"> <text>{{

colorUI 源码地址：https://github.com/weilanwl/ColorUI/将源码放入小程序文件中，只需要 css 的文件包即可，如果下载下的文件是 .css 文件后缀名，直接改成和钉钉小程序契合的 .acss 文件后缀名即可。app.acss 引用@import "/assets/style/colorui/main.acss";@import "/assets/style/colorui/icon.acss";测试......

前言因为小程序引入了 colorUI 框架，请参照如下文章：https://blog.csdn.net/weixin_43930421/article/details/124748879组件截图代码实现在 components 文件目录下新建 rate 组件。rate.axml<view> <view> <text a:for="{{max}}" data-value="{{item}}" key="{{index

效果图：首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879代码实现

钉钉小程序中的 sjs 相当于微信小程序的 wxs，可以在 axml 中引入 js 方法。sjs 中的数据类型和原生 js 大致相当，详情可以查阅链接：https://open.dingtalk.com/document/orgapp-client/data-type注意但是需要注意的是，sjs 中的日期类型和原生有细微的区别。原生 js 获取日期对象：var d = new Date();d.getFullYear(); // 获取当前年份sjs 获取日期对象：var date =

在 components 文件目录新增 avatar 组件avatar.axml<image class="ava-round {{size}}" mode="aspectFit" src="{{url}}" onError="onError" />avatar.acss.ava-round{ border-radius: 50%;}.mini{ height: 60rpx; width: 60rpx;}.lg{ height: 100rpx; width:

问题钉钉小程序的 rich-text 富文本组件，提供了在手机上浏览图文信息的富文本内容功能。但是如何实现点击富文本信息，实现其中图片的预览？rich-text 组件提供了下列事件，但是很难通过这些事件定位到用户具体点击了哪张图片（富文本中可能存在多张图片，也可能没有图片）解决退而求其次，只要点击了组件内容，如果其中存在图片信息，就调用 previewImage 接口实现预览。其中难点在于使用递归查询 nodes 数组是否存在图片节点。// 点击富文本预览图片const richTap =

一种是固定在右下角的圆形按钮，一种是固定底部的提交按钮。首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 floatBtn 组件floatBtn.axmlfloatBtn.jsfloatBtn.acss参数事件说明参数/事件说明默认值color按钮颜色，查看 color 颜色值‘blue’position......

开发应用过程中，时常要用到裁剪图片的场景。最常使用到头像裁剪的场景要算是头像编辑了。vue 项目可使用 vue-cropper 实现，参考：https://blog.csdn.net/weixin_43930421/article/details/124836898但是在钉钉小程序中，就可以很简便的调用到手机自带的图片编辑功能。head.axml给图片赋予点击事件后，在 selImg 方法中选中图片后调用 editPicture 编辑注意需要判断当前钉钉版本是否支持，调用成功，success 函数

微信小程序组件的丰富和完善程度要远远高于钉钉小程序。这里说说这两个小程序中 picker 组件的区别。微信的 picker 组件通过 mode 参数可以设置为多种选择器类型。对于不同的mode，picker拥有不同的属性。相比之下，钉钉的 picker 选择器就单调的可怜。它没有 mode 去设置各种选择器，只能够设置为单列的选择器。日期、时间选择器虽然钉钉小程序不能通过 picker 直接设置日期和时间选择器，但是可以通过开放的接口 dd.datePicker 去打开日期选择列表。这里需要注意的是最好在

虽然钉钉小程序自带了时间选择 api。但是这个功能所展示的 ui 界面在 ios 和安卓系统上并不一致。而且在 ios 上日期是一行行去滑动的，导致选择跨年或跨月日期就要滑动很久。基于以上2点考虑，决定自己开发组件，以满足功能需求。效果图如下。因为系统全局引入了 colorUI，所以在组件中也用到了相关样式，引入参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 tmSelect 组件

之前实现过在 web 端的自定义表单，使用 vue + elementUI，参考链接：https://blog.csdn.net/weixin_43930421/article/details/125041581现在随着移动端完善，需要在钉钉小程序上也实现类似自定义表单。首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 custForm组件custFor

上一篇说的是自定义表单模板，这一篇则是针对表单模板的编辑。在 components 文件目录下新建 formDetail 组件formDetail.axmlformDetail.js