APICloud 弹动与滚轴冲突的解决模拟

news/2024/11/17 0:27:32/

        当打开页面的bounces开关来实现下拉刷新和上翻加载是,如果页面中有scroll-view,那么手指上下滑动时弹动会触发,而滚轴无法正常实现,只有按住不动再拖动滚轴才会触发。开始想通过获取手指点击屏幕的坐标点设置触发条件来解决两者的冲突,但是貌似APICloud无法实现,目前我的方案是做成了两层,底层触发弹动,上层放置scroll-view。在底层的scrolltobottom事件中通过sendEvent向上层传递参数,上层页面监听来加载上翻的事件。

        以上方法可以解决弹动与滚轴冲突的问题,但是实际操作时会出现手指上下滑动时上层页面不跟着操作上下移动,这个问题我没有找到方法解决。所有我自己加了页面的移动动画(api.animation)来模拟页面的移动,当然还是不太协调,只能通过duration: 100的设置尽量去模拟。

apiready() {

        api.openFrame({

            name: 'trade_list',

            url: '../trade/trade_list.stml',       //打开上层的页面

            rect: {

                x: 0,

                y: 90,  

                w: 'auto',

                h: api.winHeight - 120

            }

        });

//下拉刷新

        api.setRefreshHeaderInfo({

            visible: true,

            bgColor: '#fff',

            textColor: '#e1017e',

            showTime: true

        }, function (ret, err) {

            api.animation({

                name: 'trade_list',

                duration: 100,

                curve: 'linear',

                autoreverse: true,

                alpha: 0.6,

                translation: {

                    x: 0,

                    y: 50,

                    z: 0

                },

                scale: {

                    x: 1.2,

                    y: 1,

                    z: 1

                },

                rotation: {

                    degree: 45,

                    x: 0,

                    y: 0,

                    z: 1

                }

            }, function (ret, err) {

                api.alert({

                    msg: '动画结束'

                });

            });

            api.refreshHeaderLoadDone();

        });

//上翻加载

        api.addEventListener({

            name: 'scrolltobottom',

            extra: {

                threshold: 10            //设置距离底部多少距离时触发,默认值为0,数字类型

            }

        }, function (ret, err) {

            api.animation({

                name: 'trade_list',

                duration: 200,

                curve: 'linear',

                autoreverse: true,

                alpha: 0.6,

                translation: {

                    x: 0,

                    y: -50,

                    z: 0

                },

                scale: {

                    x: 1.2,

                    y: 1,

                    z: 1

                },

                rotation: {

                    degree: 45,

                    x: 0,

                    y: 0,

                    z: 1

                }

            }, function (ret, err) {

                api.sendEvent({

                    name: 'myEvent',

                    extra: {

                        key1: 'value1',

                        key2: 'value2'

                    }

                });

            });


http://www.ppmy.cn/news/29569.html

相关文章

mybatisplus复习(黑马)

学习目标能够基于MyBatisPlus完成标准Dao开发能够掌握MyBatisPlus的条件查询能够掌握MyBatisPlus的字段映射与表名映射能够掌握id生成策略控制能够理解代码生成器的相关配置一、MyBatisPlus简介MyBatisPlus(简称MP)是基于MyBatis框架基础上开发的增强型工…

Spring的核心基础——IOC与DI

文章目录一、Spring简介1 Spring介绍1.1 为什么要学1.2 学什么2 初识Spring2.1 Spring家族2.2 Spring发展史3 Spring体系结构3.1 Spring Framework系统架构图4 Spring核心概念问题导入4.1 核心概念二、IOC和DI入门1 IOC入门问题导入1.1 门案例思路分析1.2 实现步骤1.3 实现代码…

第三章 opengl之纹理

OpenGL纹理纹理环绕方式纹理过滤多级渐远纹理加载和创建纹理stb_image.h生成纹理纹理的应用纹理单元纹理 用stb_image.h库,原先用SOIL库也可以实现。 可以为每个顶点添加颜色来增加图形的细节。但是想得到一个真实的图形,需要足够多的顶点,…

软件测试-接口测试-代码实现接口测试

文章目录 1.request1.1 request介绍1.2 发送get请求1.3 发送set请求1.4 其他请求方式1.5 传递url参数1.6 响应内容解析1.7 cookie1.8 设置session2.集成UnitTest2.1 接口测试框架开发2.2 案例:使用TPShop项目完成对登录功能的接口测试1.request 1.1 request介绍 概念 基于py…

Newman+Jenkins实现接口自动化测试

一、是什么Newman Newman就是纽曼手机这个经典牌子,哈哈,开玩笑啦。。。别当真,简单地说Newman就是命令行版的Postman,查看官网地址。 Newman可以使用Postman导出的collection文件直接在命令行运行,把Postman界面化运…

「ABAP」一文带你入门OPEN SQL中的SELECT查询(附超详细案例解析)

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后…

3D,点云拼接2

文章目录 点云配准方法自动配准技术PCL实现的配准算法两两配准1.关键点提取2.特征描述符3. 对应关系估计4. 对应关系去除5. 变换矩阵估算在上篇文章中对于拼接的概念、拼接精度的评价做了详细的介绍。本文是对拼接(配准)的进一步介绍,涉及更多原理层面的东西。 主要围绕以下三…

Nginx国密支持问题记录

文章目录添加国密支持可能出现的问题国密不生效,查看 Nginx 可执行文件路径是否正确证书无法解析Nginx无法启动添加国密支持 NGINX添加国密支持 添加国密支持可以直接按照官网的操作顺序操作即可 参考网址:https://www.gmssl.cn/gmssl/index.jsp 可能出…