• 欢迎光临~

关于在nvue中使用BindingX的记录

开发技术 开发技术 2022-05-24 次浏览

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

关于在nvue中使用BindingX的记录

程序员灯塔
转载请注明原文链接:关于在nvue中使用BindingX的记录
喜欢 (0)