APICloud 弹动与滚轴冲突的解决模拟
当打开页面的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'
}
});
});
上一篇：前端利用emailjs发送邮件
下一篇：【存储】存储协议