- 小程序调用boundingClientRect等获取元素位置信息很慢
如题,我要实现一个sticky组件,需要在onPageScroll中调用boundingClientRect获取元素的位置信息,但是 现在有一个问题: 如果页面慢慢滚动的话,能在4ms内获取到元素位置信息,看起来过渡就很流畅; 而如果一下子将页面滚动到顶部或者底部(页面到头后会超出可滚动区域然后回弹一下),这个时候获取位置信息就会很慢,平均500ms,有时候是1700ms,这会导致过渡的时候有一个卡顿。 下图console中打印的是我滚动页面时,每次调用boundingClientRect前和执行boundingClientRect的回调函数之间的时间差,可以看到,有时候很快(2、30、80ms),有时候就很慢(315、1367、1900ms)。 [图片] [图片] 我已经给onPageScroll事件设置了debounce,保证滚动结束后100ms后才调用boundingClientRect。 我上传了一个代码片段,复现步骤是:滚动的稍微慢点,或者特别快(我也不知道具体是什么情况下)多试试。它有时候获取得很快,都在10ms内: [图片] 有时候就获取得很慢,是1000ms以上: [图片] 请问这是什么原因?
2018-05-25 - wx:for创建组件列表后,数组中的部分数据被删除时,组件列表如何更新
更新: 以下是我对下面描述的bug的一个解释。如果我的猜想正确,请告诉我能否强制重新创建组件;如果不正确,请告诉我原因。多谢各位开发者与管理员。 操作: 选择第1、第3本书,删除书目 期望结果: 第1、第3本书被从页面上删除,页面上剩下的图书都是未选择状态 实际结果: 原来的第1、第3本书被从页面上删除,但是页面上剩下的图书里,第1、第3本仍然是被选择状态 原因推测: 当数组的数据变动时,框架并没有把那些被删除的数据对应的组件也删除,而是从前往后保留所需数量的组件,然后把后面多出来的组件删除。这造成的问题是,前面未被删除的组件的内部状态会被保留。 在这个例子里,一开始选择了第1、第3本书,所以第1、第3个booklist-item组件内部的checked属性被设为true。删除了items数组中的第1、第3项后,第1、第3个booklist-item组件并未删除,而仅仅是其中的book属性被替换为新的值。删除的实际是最后两个booklist-item组件,对吗? 临时解决方法: 在删除完书目后,设置isSelecting为false,强制让每个booklist-item组件重置checked属性为false。 原提问: 使用wx:for创建一个列表,列表内每个元素是一个自定义组件。当wx:for使用的数组改变后,并没有重新创建每个组件,而是按照顺序复用了之前创建的组件,且每个组件内部状态保留,只是数据发生变化。 我希望能够重建每个组件,使组件内部数据为初始状态。 如下图,每本书是一个组件: 选中第一本书,组件内部checked == true。然后在数组中删除第一本书后重新setData,可以看到列表直接没有重新创建组件,只是相当于把剩余的数据从第一个组件开始依次传递给每个组件。这造成的问题是,本来第二本书是没有被选中的,现在也被选中了。 只选中第一本,然后点击删除: [图片] 删除第一本后,第一个图书组件还是被选择状态: [图片]
2018-05-21 - 能否直接在组件html上为组件根元素设置自定义class
如题,假如我有一个spinner组件,它在不同的页面里,显示的位置是不同的,因此我需要为每个spinner设置不同的class。再假设我有一个middle样式,将一个元素显示在页面正中。现在我希望在当前这个页面里,spinner组件显示在页面正中。 按照目前的小程序能力,我能想到的是以下几种实现方式。一种是在spinner外部包裹一个view,添加自定义class: [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"middle"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]spinner[代码][代码]></[代码][代码]spinner[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] 另一种是为spinner定义externalClasses,然后从外部把“middle”这个class传给spinner组件。 最后一种是在spinner内部设置host选择器样式,但这会造成组件与自己的显示位置紧耦合,不利于修改。 可否实现如下功能:在spinner组件上直接设置class属性,可以将这些class直接挂在spinner组件的根元素上 即: [代码]<[代码][代码]spinner[代码] [代码]class[代码][代码]=[代码][代码]"middle"[代码][代码]></[代码][代码]spinner[代码][代码]>[代码] --- 补充: 之所以有这个需求,是因为我之前用vue时,vue支持此功能。但是vue强制要求每个组件只有一个根元素,而小程序并无此要求。 那么请问有没有什么优雅的方式实现我的需求?
2018-05-20 - 上传两张图片报错uploadFile:fail createUploadTask
同时上传两张图片时报错,但是去年这个代码是可以运行的。 错误内容: VM290:1 uploadFile:fail createUploadTask:fail exceed max upload connection count 1 代码: [代码]function[代码] [代码]Promisify (fn) {[代码][代码] [代码][代码]return[代码] [代码]function[代码] [代码](obj = {}) {[代码][代码] [代码][代码]return[代码] [代码]new[代码] [代码]Promise((resolve, reject) => {[代码][代码] [代码][代码]obj.success = [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]resolve(res)[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]obj.fail = [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]reject(res)[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]fn(obj)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码]}[代码] [代码]// 上传图片[代码][代码]function[代码] [代码]uploadIdCardImg (filepath) {[代码][代码] [代码][代码]return[代码] [代码]Promisify(wx.uploadFile)({[代码][代码] [代码][代码]url: `${BASE_URL}/upload`,[代码][代码] [代码][代码]filePath: filepath,[代码][代码] [代码][代码]name: [代码][代码]'picture'[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码] [代码]// 开始上传[代码][代码]function[代码] [代码]submit(){[代码][代码] [代码][代码]return[代码] [代码]Promise.all([[代码][代码] [代码][代码]uploadIdCardImg(filePath1),[代码][代码] [代码][代码]uploadIdCardImg(filePath2)[代码][代码] [代码][代码]])[代码][代码]}[代码]
2018-05-16 - 如何在页面内容加载完成前显示一个自定义加载中组件,加载完成后显示页面内容?
如题,就好像“腾讯云”小程序,在进入一个页面后,会显示一个“加载中”动画(不是wxLoading),然后页面加载完成后显示页面内容。想知道怎么实现这样的功能。 目前想到的是实现一个“加载中”组件,然后把整个页面内容用<block wx:if="{{!loading}}">包裹起来。这种方法需要每个页面都去用相同的代码包裹一次,请问有更好的实现方法吗?
2018-05-14 - 页面销毁后,页面js内的全局变量会销毁吗?
如题,如果我在某个页面的index.js里定义了全局变量,那么当从这个页面返回到上一页后,全局变量会随着页面销毁而被回收吗? 如下,从PageA跳转到PageB,再从PageB返回到PageA,PageB内的变量globalParam2是否还保存在当前小程序的运行环境中? [代码]// pageA.js[代码][代码]var[代码] [代码]globalParam1 = [代码][代码]'test1'[代码][代码]Page({[代码][代码]//...[代码][代码]})[代码][代码]// pageB.js[代码][代码]var[代码] [代码]globalParam2 = [代码][代码]'test2'[代码][代码]Page({[代码][代码]//...[代码][代码]})[代码]
2018-04-22 - App onLaunch里无法getApp吗?
我在onLaunch里调用getApp(),或者在onLaunch里调用的函数里调用getApp(),得到的都是undefined。onLaunch被调用的时候,app实例还没有被创建吗? 代码: [代码]function[代码] [代码]test () {[代码][代码] [代码][代码]console.log(getApp()[代码][代码]}[代码] [代码]// login 页面的onLoad:[代码][代码]Page({[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]test()[代码][代码]})[代码] [代码]// app.js[代码][代码]App({[代码][代码]onLaunch: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]test()[代码][代码] [代码][代码]}[代码][代码]})[代码] 如下图,第一个是App onLaunch的输出,第二个是Page onLoad的输出: [图片]
2018-04-17 - 【Bug】textarea在fixed容器隐藏时仍然会在外面显示一会儿再隐藏
问题描述: iPhone5s,iOS11.3环境,微信6.6.6,小程序基础库1.9.98 textarea位于一个fixed区域中。区域隐藏时,textarea会在外面显示一会儿再隐藏。如果手速快,能够点击这个还没来得及隐藏的textarea组件,然后输入内容。 代码片段: wechatide://minicode/bl96OLmx6OYl 重现步骤: 1. 点击第一个按钮“打开popup(有bug)”,显示弹出层 [图片] [图片] 2. 点击黑色背景或取消,关闭popup,可以看到textarea的placeholder仍然显示约500ms之后才消失 [图片] 3. 点击第二个按钮“打开popup(没有bug)”,显示弹出层 4. 点击黑色背景或“取消”,关闭popup,可以看到此时textarea在popup关闭后直接消失 第二个按钮与第一个按钮的区别: 我在第二个按钮的弹出层内,textarea上加了一个“hidden="{{!popup.show}}"”,即在弹出层隐藏的同时隐藏textarea
2018-04-16 - loading组件,旋转动画keyframes命名为loading时
如代码片段所示,有一个loading旋转动画,当keyframes命名为loading时,在iOS内不会旋转: [图片]
2018-04-16 - wx:for创建组件列表后,数组中的部分数据被删除时,组件列表如何更新
更新: 以下是我对下面描述的bug的一个解释。如果我的猜想正确,请告诉我能否强制重新创建组件;如果不正确,请告诉我原因。多谢各位开发者与管理员。 操作: 选择第1、第3本书,删除书目 期望结果: 第1、第3本书被从页面上删除,页面上剩下的图书都是未选择状态 实际结果: 原来的第1、第3本书被从页面上删除,但是页面上剩下的图书里,第1、第3本仍然是被选择状态 原因推测: 当数组的数据变动时,框架并没有把那些被删除的数据对应的组件也删除,而是从前往后保留所需数量的组件,然后把后面多出来的组件删除。这造成的问题是,前面未被删除的组件的内部状态会被保留。 在这个例子里,一开始选择了第1、第3本书,所以第1、第3个booklist-item组件内部的checked属性被设为true。删除了items数组中的第1、第3项后,第1、第3个booklist-item组件并未删除,而仅仅是其中的book属性被替换为新的值。删除的实际是最后两个booklist-item组件,对吗? 临时解决方法: 在删除完书目后,设置isSelecting为false,强制让每个booklist-item组件重置checked属性为false。 原提问: 使用wx:for创建一个列表,列表内每个元素是一个自定义组件。当wx:for使用的数组改变后,并没有重新创建每个组件,而是按照顺序复用了之前创建的组件,且每个组件内部状态保留,只是数据发生变化。 我希望能够重建每个组件,使组件内部数据为初始状态。 如下图,每本书是一个组件: 选中第一本书,组件内部checked == true。然后在数组中删除第一本书后重新setData,可以看到列表直接没有重新创建组件,只是相当于把剩余的数据从第一个组件开始依次传递给每个组件。这造成的问题是,本来第二本书是没有被选中的,现在也被选中了。 只选中第一本,然后点击删除: [图片] 删除第一本后,第一个图书组件还是被选择状态: [图片]
2018-04-15