关于在nvue中使用BindingX的记录
在开发APP时，如果使用的是nvue页面，那么就会按照官方推荐的去使用BindingX，BindingX能够提升app的流畅使用，BindingX其实可以粗略的理解成，JS版的Css，
在Css中，我们习惯使用百分比，绝对值，或者是calc()函数去计算，
在BindingX中，事件绑定了Css属性，而Css属性的值，是JS表达式，当然该表达式得按照BindingX的规则去写。
因此，触发了事件，也就改变了预定值，表达式的值也发生变化，界面也随之发生变化，这里的内置值，指的是BindingX事件给你内置的一个值，例如触摸事件，touchstart、touchmove、touchend都会有坐标，而x和y就是手指的偏移量，通俗的说就是移动的距离。该值在表达式中能够参与计算。
因为vue2和vue3不一样，所以写法不一样，贴一个demo，其他的自行修改就行。
注意：uniapp仅nvue页面（nvue才用BindingX，vue用其他的，参考官网uniapp）
Vue3 - nvue
<template>
<view class="a" ref="a" @touchmove="collapse">
<div ref="b" class="b"></div>
</view>
</template>
<script>
import { ref } from 'vue';
const Binding = uni.requireNativePlugin('bindingx');
export default {
setup(){
const a = ref(null);
const b = ref(null);
return { a , b , collapse }
function getEl(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) return el.ref;
else return el instanceof HTMLElement ? el : el.$el;
}
function collapse() {
let main_binding = Binding.bind({
anchor:getEl(a.value),
eventType: 'pan',
props: [{
element: getEl(b.value),
property: 'height',
expression: 'y+0'
}]
});
console.log(main_binding)
}
}
}
</script>
<style lang="scss">
.a{
width: 750rpx;
height: 1500rpx;
background: lightsteelblue;
flex-direction: row;
justify-content: center;
}
.b{
width: 100rpx;
height: 100rpx;
background:deepskyblue;
border: 2rpx solid royalblue;
position: absolute;
top: 200rpx;
left: 350rpx;
border-radius: 20rpx;
}
</style>
Vue 2 - nvue
<template>
<view class="a" ref="a" @touchmove="collapse">
<div ref="b" class="b"></div>
</view>
</template>
<script>
const Binding = uni.requireNativePlugin('bindingx');
export default {
data() {
return {}
},
methods:{
getEl: function(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) return el.ref;
else return el instanceof HTMLElement ? el : el.$el;
},
collapse: function () {
let main_binding = Binding.bind({
anchor:this.getEl(this.$refs.a),
eventType: 'pan',
props: [{
element: this.getEl(this.$refs.b),
property: 'height',
expression: 'y+0'
}]
});
console.log(main_binding)
}
}
}
</script>
<style lang="scss">
.a{
width: 750rpx;
height: 1500rpx;
background: lightsteelblue;
flex-direction: row;
justify-content: center;
}
.b{
width: 100rpx;
height: 100rpx;
background:deepskyblue;
border: 2rpx solid royalblue;
position: absolute;
top: 200rpx;
left: 350rpx;
border-radius: 20rpx;
}
</style>
效果是，往下滑动，这个方块的高度会等于这个偏移量，在滑动的时候，高度为0，往下滑动多长的距离，b的高度就是多长的距离。
最后，需要注意的是，在BindingX中，anchor和element都是引用的组件，如果不生效，可以控制台打印，看看引用的信息里面有没有ref，$el，这样的，类型为string或者数字，以上代码如果不能跑起来，很大概率就是ref的值不对，具体的说是BindingX需要接受引用组件的ref值，因为不同平台名称不一样，有的叫$el，或者el，或者$ref。
例如:
(vue2)：anchor：this.$refs.xxx.ref 或者 anchor：this.$refs.xxx.$el , 具体情况看打印出来的名称。
(vue3)：anchor：xxx.value.ref 或者 anchor：xxx.value.$el
- tips: 该代码为上文中的BindingX接收的ref值，如上面不生效，请将上两行代码进行原文替换，如果你还有其他地方有引用，其他地方的写法也需要修改。例如props里的element接收的组件
顺带一提：因为vue3里没有this，讲讲vue3的组件如何引用
<div ref='xxx'></div>
/* 在setup函数里面写，如果不知道setup请先了解vue3 */
setup(){
const xxx = ref(null); // 引用ref我就不写了,xxx必须同名
return { xxx }
}
