详细问题描述
下面的代码,会在 iOS 上正确发生滑动效果的动画,同样的代码,在安卓真机测试时,没有任何动画产生。
<image :src="seminarParam.poster" class="card-bg-cover-image" mode="top-center"
ref="refImage" style="transform: scale(1.2)"
</image>
...
<view class="bg-cover-mask" ref="refMask"></view>
...
<scroll-view class="nv-scroll-v-2" scroll-y="true" show-scrollbar="false" scroll-with-animation="true" enable-flex="true" offset-accuracy="1" @scroll="onListScroll"ref="refScroll"
>
...
</scroll-view>
mounted() {
...
this.bindAnimations();
}
methods: {
...
getEl(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
// #ifdef APP-PLUS-NVUE
return el.ref;
// #endif
// #ifndef APP-PLUS-NVUE
return el instanceof HTMLElement ? el : el.$el;
// #endif
},
bindAnimations() {
// #ifdef APP-PLUS-NVUE
const Binding = uni.requireNativePlugin('bindingx');
let self = this;
let refScroll = this.getEl(self.$refs.refScroll);
let refImage = this.getEl(self.$refs.refImage);
let refMask = this.getEl(self.$refs.refMask);
Binding.bind({
eventType: 'scroll',
anchor: refScroll,
props: [
{
element: refImage,
property: 'transform.scale',
expression: 'y >= 0 ? max(1.2-y/500,1.0) : (1.2 - y/200)',
},
{
element: refImage,
property: 'transform.translateY',
expression: 'y>=0 ? -y : 0',
},
{
element: refImage,
property: 'opacity',
expression: 'y<=0?1.0:max(0.0, (1-y/500))'
},
{
element: refMask,
property: 'opacity',
expression: 'y<=100?0.0:max(0,min(1.0, (y-100)/120))',
},
],
});
// #endif
},
}
重现步骤
上面代码编译运行,iOS 正确,android 不正确
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
18:40:06.210 项目 'FunCamp' 开始编译...
18:40:07.295 编译器版本:2.3.7
18:40:07.300 当前项目编译模式:自定义组件模式。编译模式差异见:https://ask.dcloud.net.cn/article/35843
18:40:07.317 当前nvue编译模式:uni-app 。编译模式差异见:https://ask.dcloud.net.cn/article/36074
18:40:28.131 DONE Build complete. Watching for changes...
18:40:28.131 项目 'FunCamp' 编译成功.
[IDE版本号]
[windows版本号]
[mac版本号]
MacOS 10.14.6
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件
App运行环境说明
[Android版本号]
华为 Mate20Pro,真机,结果不正确
[iOS版本号]
iPhone 11 Pro,iOS13,模拟器,结果正确
iPhone 6,iOS12,真机,结果正确
[手机型号]
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
联系方式
[QQ]
271393
4 个回复
木公
请问楼主解决了吗
DCloud_uniCloud_WYQ
传个压缩包上来,直接能跑起来的那种
木公
@DCloud_UNI_王亚琪
上传 包中已经复现出来这个问题 模式为 weex 自定义组件模式。
目前已经发现这个原因是: andriod手机 在绑定了 bindingx之 后,
如果被绑定的元素里面内容发生变化,那 bindingx就失效了。 但是IOS不会有这个问题。
所以想问问这块 Uni-app在底层对 bindingx实现, Andriod与IOS是不是有什么不同
木公
不知道楼主是否也存在这样的情况
DCloud_uniCloud_WYQ
你的示例不是开启setTimeout就正常了吗?测试了一下安卓上内容变化没有问题
2019-11-28 22:10
木公
回复 DCloud_uniCloud_WYQ: 开启 setTimeout 是正常了 , 但是IOS 不开启 setTimeout 也是正常的, 唯一的变化 是 listdata 最开始 是[] ,然后我绑定了 bindingx ,然后我更新了listdata数据 , 这个时候,andriod 就不生效了, 但是IOS是可以的, 这说明 在andriod上,绑定的bindingx因为listdata数据更新之后消失了。 我想提的是这个问题。。
2019-11-29 11:54
DCloud_uniCloud_WYQ
回复 木公: 可以尝试一下看weex本身是不是就这样的
2019-11-29 15:01