HbuilderX 使用2.3.4后,nvue编译模式为:uni-app。原有使用npm安装的bindingx引用会报错,动画也是无效。通过论坛看到改为使用以下引用后,页面一准备滑动就会闪退。动画代码在2.3.3的版本通过npm安装引用后是正常的。以下的滑动动画绑定的是nvue的list组件。
const Binding = weex.requireModule('bindingx')
动画代码:
HbuilderX 使用2.3.4后,nvue编译模式为:uni-app。原有使用npm安装的bindingx引用会报错,动画也是无效。通过论坛看到改为使用以下引用后,页面一准备滑动就会闪退。动画代码在2.3.3的版本通过npm安装引用后是正常的。以下的滑动动画绑定的是nvue的list组件。
const Binding = weex.requireModule('bindingx')
动画代码:
暂时这样解决,bind时传入第二个参数
<template>
<view class="page">
<list ref="list1" class="list">
<cell v-for="(item, index) in dataList" :key="item.id">
<view class="list-item">
<text>{{item.name}}</text>
</view>
</cell>
</list>
<view ref="block" class="block"></view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: []
}
},
onReady() {
for (var i = 0; i < 30; i++) {
this.dataList.push({
id: i,
name: i
});
}
setTimeout(() => {
this.bind();
}, 300)
},
methods: {
bind(e) {
const Binding = weex.requireModule('bindingx');
Binding.bind({
eventType: 'scroll',
anchor: this.getEl(this.$refs.list1),
props: [{
element: this.getEl(this.$refs.block), //动画元素
property: 'opacity', //动画属性
expression: '1-y/400' //表达式 说明了y从0-400,对应的值是1-0
},
{
element: this.getEl(this.$refs.block), //动画元素
property: 'transform.scale', //动画属性
expression: 'y<200?1+y/200:2-(y-200)/200' //说明了y从0-200,对应的值是1-2
}
]
}, (res) => {
console.log(res);// 第二个参数
});
},
getEl(e) {
return e.ref;
}
}
}
</script>
<style>
.page {
flex: 1;
flex-direction: column;
}
.list {
flex: 1;
background-color: lime;
}
.list-item {
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: #007AFF;
}
.block {
position: fixed;
left: 0;
top: 0;
width: 50px;
height: 50px;
background-color: red;
}
</style>