关于在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的高度就是多长的距离。