本来项目都写的差不多了,测试测着侧着就冒出了新的想法,我因为做的是问卷,因此会有用户必答题未答完的可能存在,本来市场部给的需求就是做一个弹窗就好了,她说想要做出跳回到用户未答的第一道题,好吧,既然都这么说了就只有实现一下了

首先来理一下思路:

1.要获取用户未填写的题目

2.定位到第一个未填写的题目节点

3.获取坐标并跳到该坐标位置

第一步获取用户未填写题目很容易啦,可以在里面加个字段什么的来标记是否填写,拿单选题为例当用户点击的时候触发事件传递给父组件

this.$emit('choice', {
questionId: this.question.id,
answerIds: e.target.value,
selectedIndex: selectedIndex,
areaId: this.question.areaId,
ifAnswered: this.myIfAnswered // 是否已答标志
})

然后在提交的时候拿到未答的题目

for (let a = 0; a < this.submitArr.length; a++) {
if (this.submitArr[a].ifAnswered === 'N') {
this.notAnswered.push(this.submitArr[a])
}
}

为了要定位到未填写的题目,我是在初次渲染的时候就给每个组件绑定了该问题的唯一问题id,想要通过微信的selector去获取id直接获取到该组件的top值,结果就在这里踩坑了,因为我发现选择器使用id是不会返回结果的,经过多次失败之后我就尝试了类选择器,结果就出来了,我想可能是因为我绑定的id是数字?再然后就选择一些第一个内容就可以了。

var query = wx.createSelectorQuery()
let myTop = []
query.selectAll('.myAnswer').boundingClientRect()
query.exec((res) => {
myTop = res[0]
}
let myChoose = myTop[0].top
wx.pageScrollTo({
scrollTop: myChoose.,
duration: 300
})

这里要记录一个坑,因为我也是第一次用这个滚动的API,百度出来人家都用的好好的,但是我的就是不行,不说回调失败了,根本好像就没有触发,什么fail,success,complete都没有打印日志,也搜到过同样的问题但是别人貌似都没有解决,问了一手师傅,但是师傅鼓捣了一上午也没搞出来,然后我就重新建了一个干净的页面发现可以滚动,于是乎我就尝试着把我的组件最外层样式删掉了,终于发现,原来是因为我的组件设置了position:absolute,貌似就是这个原因导致API无效,如果有其他小伙伴出现跟我一样的问题,记得一定看看自己的position,不能设置哦relative也不行,反正就是都不行。

谁曾想,我在自己的组件把position删掉了又出现了另一个问题,打印显示回调成功,但是界面并没有滚动,经过查找发现是page.js的配置出现了问题,这个项目原来设置了不让滚动,我简直无语了hhh

最后只需要把这个配置'disableScroll': true 删掉就可以了,因为默认的就是允许滚动。

mp-vue实现小程序回顶操作踩坑,wx.pageScrollTo使用无效填坑的更多相关文章

  1. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  2. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  3. 微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API

    原文:微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API 反正我是没有测通这两个API!!!!不知道用的方式不对还是其他的!! ...

  4. vue制作小程序--mpvue

    mpvue是一个使用 Vue.js 开发小程序的前端框架 http://mpvue.com/ sass的使用 https://segmentfault.com/q/1010000014194954 n ...

  5. 微信小程序中登录操作-----与-----引用

    login.wxml <view> <!-- <image src="./88.png"></image> --> # 在当前目录下 ...

  6. vue和小程序的相似之处

    小程序参考vue语法,之前做过小程序的,可以逆向思维.1,Vue文件后缀是.vue,vue组件把html<template>.js<script>和css<style&g ...

  7. 微信小程序之数组操作:push与concat的区别

    微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...

  8. 【微信小程序】数组操作

    Page({ data: { list:[{ id:1, name:'应季鲜果', count:1 },{ id:2, name:'精致糕点', count:6 },{ id:3, name:'全球美 ...

  9. 微信小程序 更新版本操作

    1.小程序的启动方式: 冷启动----小程序首次打开或销毁后再次被打开 热启动----小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台. 2.根据以上两种启动方式, ...

随机推荐

  1. logback.xml配置文件解析一

    配置文件主要结构如下: <?xml version="1.0" encoding="utf-8"?> <configuration> & ...

  2. Audio Bit Depth Super-Resolution with Neural Networks

    Audio Bit Depth Super-Resolution with Neural Networks 作者:Thomas Liu.Taylor Lundy.William Qi 摘要 Audio ...

  3. 一个简单的MyBatis项目

    1.log4j.properties,我们把它设为debug级别,以便于调试.生产环境可以设为INFO,本项目放在src下面: # Global logging configuration log4j ...

  4. JAVA线程基础概念及使用

    一.线程和进程的区别 在操作系统中所有运行的任务通常对应一个进程,进程是系统进行资源分配和调度的一个独立单位.线程是进程的组成部分,一个进程最少包含一个线程.并发和并行的区别是,并发指的在同一时刻内, ...

  5. UML图标含义及记忆方法

    记忆技巧: 箭头的一方为被动方(被调用者): 箭头的端点为主动方(调用者). 箭头为封闭三角形时,表示类间关系 箭头为半封闭尖括号时,表示类内关系.其中,虚线表示参数强制依赖关系,实线表示属性关系.一 ...

  6. ArchLinux安(重)装指南

    说实话,我其实是不想要出这篇博客的.在我这一个月安装Arch的过程中,让我感触比较深的一点是: 没有谁比这个系统的官方更懂它. 尤其是这种比较复杂的系统,更是如此. 这几天,我经历了一次重装,系统坏了 ...

  7. java架构之路-(SpringMVC篇)SpringMVC主要流程源码解析(下)注解配置,统一错误处理和拦截器

    我们上次大致说完了执行流程,也只是说了大致的过程,还有中间会出错的情况我们来处理一下. 统一异常处理 比如我们的运行时异常的500错误.我们来自定义一个类 package com.springmvcb ...

  8. 开发电商平台用PHP语言和JAVA语言有什么区别?哪种语言更好?

    现在很多行业都通过电子商务拓展业务,所以商城系统开发成为很多企业的刚性需求.一般有一点技术基础的客户应该知道目前商城系统开发主流语言有两个,PHP和Java.那么很多客户朋友会纠结是选择哪个语言开发好 ...

  9. 值类型不允许赋值为Null

    与引用类型不同,值类型不可能包含 null 值. 每种值类型均有一个隐式的默认构造函数来初始化该类型的默认值.有关值类型默认值的信息,请参见默认值表. bool false byte 0 char ' ...

  10. maven突然报大量package does not exist(包不存在)问题

    遇到个问题,不知道原因,虽然已解决,但是扔不知道为什么,希望有大神帮忙解答下~~~不胜感激~~~ 国庆假期回来后,小伙伴发布测试服务器版本忽然发现报错,我咨询IT管理组近期并没有对服务器配置和权限做调 ...