固安县城乡和住房建设局网站商业软文案例
当打开页面的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'
}
});
});