前言
在搭建一些与申请相关的微信小程序的时候，用户会遇到需要填写很多表单的情况，面对未知的表单数量，用户往往就会放弃填写申请表格。在此基础上作为开发者的我们常常会收到这样的一个任务——给申请页面加上一个填写进度表。这样不仅可以优化用户填写的体验，给予他们及时反馈，又可以实时提供给用户还有多少信息框未填完的信息。
效果图
效果图解释说明：当用户每填写一个输入框，圆形进度条就会增加一点，当全部填写完毕后，就到达100%。
核心思想
使用vant组件库中的van-circle（圆形填写进度条）组件
使用微信开发者工具支持的movable-area和movable-view组件（可移动视图区域、可移动视图容器）
使用JS代码实现用户输入完输入框后自动添加相关的进度值
注：使用van-circle是为了使用进度条这个组件，避免了自己去制作的麻烦；使用movable组件是为了可以自己移动进度条，避免遮挡用户需要填写的提示字从而达到优化用户体验。
实际操作
van-circle
1.安装vant官网的相关的安装教程来引入外部组件库
2.引入完成后，在需要圆形进度条的json文件中声明需要使用的外部组件
3.完成上述步骤后你就可以在wxml中使用相关的组件了
注：这个van-circle组件也支持很多属性，可以在vant的官网中查询相关的资料，链接我放下面了。
vant组件库中的van-circle组件
movable-area、movable-view
因为是微信开发者工具的内部组件因此不需要引入，直接在wxml中使用即可。组件相关的链接我也放下面了。
movable-area | 微信开放文档 (qq.com) movable-view | 微信开放文档 (qq.com)
这里给大家介绍一下，该页面是有两个层的。上面的是可移动进度条层（movable-area），下面是内容层（container）。
通过一些css代码来使得两个层级分开就可以了。
movable-area{
pointer-events:none;
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
通过JS使得每填写一个输入框进度条增加
以我这个页面为例，一共有16处地方需要用户填写，因此我就在data中创建了十六个变量，每一个填写的地方对应一个变量，假如用户填写完，就使用setdata方法使得其对应的变量从0变成相应的值。
if (this.data.huodongna) {
this.setData({
num1:100/16
})
}
题外话
如果你有什么更好的想法和方法可以在底下留言~如果你觉得对你有帮助的话可以不要吝啬你的赞和收藏吗~
