APICloud 弹动与滚轴冲突的解决模拟
创始人
2024-05-28 10:49:42
0

        当打开页面的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'

                    }

                });

            });

相关内容

热门资讯

飞蛾的梦的专辑背景 飞蛾的梦的专辑背景 正规一辑《飞蛾的梦》为李升基的出道专辑,于2004年6月25日在韩国发行 。李升...
上大学迁户口好还是不迁好呢?农... 上大学迁户口好还是不迁好呢?农村户口迁不迁呢?上大学是否迁户口,可以根据自己的情况灵活掌握。但是现在...
家长举报学校暑假违规补课,教体... 封面新闻记者 苏定伟60元/天!四川南充一名家长网上举报学校暑假违规补课。7月5日,封面新闻记者从当...
亚材门窗运营主体变更,新征程开...   近日,广东亚材静音幕墙门窗有限公司通过官方渠道发表声明,就“亚材门窗”品牌运营主体变更事宜作出正...
西安市第六中学教育集团面向社会... 教师招聘公告西安市第六中学西安市第六中学教育集团期待您的加入!期待与您共赴一场最美的约定!学校简介西...
狗狗冲向小孩主人飞扑制止暴揍教... 【#狗狗冲向小孩主人飞扑制止暴揍教育#】近日,湖南韶山。自家狗狗突然扑向路边小孩,主人箭步上前制止,...
我梦见自己结婚了,在此说破,希... 我梦见自己结婚了,在此说破,希望自己和家人身体健康,平安快乐,幸福永远,大吉大利?梦都是假的,不要想...
德媒:特朗普成“劫贫济富”的罗... 转自:参考消息参考消息网7月5日报道 德国《明镜》周刊网站7月3日刊登题为《“劫贫济富”的罗宾汉》的...
日本学者发现侵华战争新史料:日... 88年前的1937年7月7日,卢沟桥事变爆发,日本帝国主义发动全面侵华战争。日本军国主义政府为了巩固...
金领冠悠滋小羊国漫剧集完结,主... 各位国漫迷看过来!金领冠悠滋小羊舒享AI国漫神话剧集《悠滋小羊寻鲜记》迎来高能完结!灵泉村遭黑狐破坏...