【微信小程序】给你的页面加上一个填写进度表

前言

在搭建一些与申请相关的微信小程序的时候，用户会遇到需要填写很多表单的情况，面对未知的表单数量，用户往往就会放弃填写申请表格。在此基础上作为开发者的我们常常会收到这样的一个任务——给申请页面加上一个填写进度表。这样不仅可以优化用户填写的体验，给予他们及时反馈，又可以实时提供给用户还有多少信息框未填完的信息。

---

效果图

效果图解释说明：当用户每填写一个输入框，圆形进度条就会增加一点，当全部填写完毕后，就到达100%。

---

核心思想

1. 使用vant组件库中的van-circle（圆形填写进度条）组件

2. 使用微信开发者工具支持的movable-area和movable-view组件（可移动视图区域、可移动视图容器）

3. 使用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
       })
     }

---

题外话

如果你有什么更好的想法和方法可以在底下留言~如果你觉得对你有帮助的话可以不要吝啬你的赞和收藏吗~