基于位置的签到微信小程序开发简析(微信小程序点击滚动到指定位置的实现)

基于位置的签到微信小程序开发简析

签到是一项十分常见的活动，人们一直在研究如何提高签到的发起效率与管理效率，现如今，各类电子技术发展迅速，电子签到跃然成为了一种更省时省力的形式。

本系统致力于提高日常活动中人员考勤的效率，系统使用微信小程序提供的接口来获取用户的当前位置，可发起限定位置的签到，而需要签到的用户使用数据提供的表单来完成签到。随后签到发起者可以在微信小程序或是网页中查看签到完成的情况。 网页端可以导入需要签到人员的名单，也可以导出签到结果。

本系统的微信小程序端主要模块有：注册登录模块、发起签到模块、管理签到模块、个人中心模块；网页端主要模块有：注册登录模块、管理发起模块、管理参与模块、管理名单模块、个人中心模块。

注册登录模块：主要实现用户注册账号、登录账号功能，系统使用正则表达式来判断用户输入的手机号是否合法。

发起签到模块：在发起新的签到时，用户可以限定时间、地点与人员。签到设置成功后，程序跳转至分享签到界面，并提示来自服务器的口令，用户可通过截图或复制链接的形式来分享签到。

管理签到模块：界面展示签到名称、签到备注、签到发起的时间，并具有下拉刷新数据的功能。在展示的签到列表中，点击一项，可以具体查看参与签到的用户的结果信息、微信信息、设备信息等。在登录信息有效的情况下，用户可查看或删除自己发起的某项签到，也可以查看签到详情与签到结果。用户可以将签到的完成结果导出为 Excel 文件到本地进行保存。

管理参与模块：进入个人中心后，用户可查看自己历史参与的签到。用户并不能看到同样参与此次签到的其他用户的信息。

管理名单模块：用户在网页端可以导入名单，用以在发起签到时选择需要进行签到的人员列表。为避免用户上传相同名称的文件而导致错误，系统会对文件进行重命名操作，再将此文件存至服务器中。用户还可以查看或删除自己导入的名单，可以查看名单中所有人员的姓名与手机号信息。

个人中心模块：用户在微信小程序端与网页端的个人中心中皆可修改密码。若系统检查用户输入的原密码正确，且两次输入的新密码相同并符合规范，则判断修改成功。

在网页端中，若用户点击退出登录，系统会跳转到登录界面。微信小程序的个人中心页顶端会显示当前登录用户的手机号。在微信小程序端与网页端，皆有本系统的关于与帮助页面，用于展示系统的相关信息。

微信小程序点击滚动到指定位置的实现

公司项目要做一个类似微信通讯录导航的效果，点击右侧字母页面滚动到相应位置。

因为微信小程序没有dom概念，所以不能使用锚点，也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息：

解释一下该代码的意思：

1.先创建节点对象，wx.createSelectorQuery()返回一个对象实例；

2.选择显示区域；

3.调用select方法，传入节点的id值，可在同一节点对象进行多次调用，最后会返回数组结果（上图中滚动区域距离页面顶部是有两个导航栏高度的距离的，所以查询了两次导航栏）；

4.exec()回调方法中可以获取所查询所有节点的信息，数组第一条为页面的位置信息（滚动距离），获取到对应字母节点的top值为节点相对于屏幕顶部的位置

结果：页面滚动位置 = 页面滚动距离 + 字母节点相对屏幕高度距离 - 头部导航条高度 - 菜单栏高度

wx.pageScrollTo（）调用API页面滚动

如果是让滚动容器滚动到指定位置，计算位置会有一点不同：

上图因为是弹出框里的内容，所以列表放在scroll-view滚动容器中，和上面不一样的是滚动位置是：滚动容器距离页面顶部距离 - 锚点距离页面顶部距离，将计算后的偏移量修改至对应scroll-view容器的scroll-top属性就行了。

到此这篇关于微信小程序点击滚动到指定位置的实现的文章就介绍到这了,希望大家以后多多支持！