评论

小程序中可拖动回弹浮窗的一种实现

2022-10-10
3645浏览
1评论

小程序中可拖动回弹浮窗的一种实现

实现效果

代码实现

<view class="container">
  <movable-area>
    <movable-view bind:touchend="onTouchend" x="{{x}}" y="{{y}}" direction="all">
      <view class="float">text</view>
    </movable-view>
  </movable-area>
</view>




data:{
  x: wx.getSystemInfoSync().windowWidth - 60, //x的位置，此处的应为当前元素width+right 或left
  y: wx.getSystemInfoSync().windowHeight - 120, //y的位置，此处应为前元素的height+bottom 或top
  windowWidth: wx.getSystemInfoSync().windowWidth
}
onTouchend(e) {
  //console.log(e);
  const currentX = e.changedTouches[0].clientX;
  const currentY = e.changedTouches[0].clientY;
  wx.createSelectorQuery().select('.float').boundingClientRect().exec((res) => {
    //console.log(233, res);
    console.log(currentX + res[0].width / 2 > this.data.windowWidth / 2, currentX + res[0].width <= this.data.windowWidth / 2);
    if (currentX + res[0].width / 2 > this.data.windowWidth / 2) {
      this.setData({
        x: this.data.windowWidth - 20 - res[0].width,
        y: currentY - res[0].height / 2 - 10
      });
    }
    if (currentX + res[0].width / 2 <= this.data.windowWidth / 2) {
      this.setData({
        x: 20,
        y: currentY - res[0].height / 2 - 10
      });
    }
  });
  // console.log(233, res);
}
movable-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;

  movable-view {
    pointer-events: auto; //可以点击
  }
}

.float {
  width: 90rpx;
  height: 90rpx;
  border-radius: 99em;
  background: pink;
}


简单封装为组件使用

使用

2342

.float {
  width: 100rpx;
  height: 100rpx;
  border-radius: 99em;
  background: pink;
}

组件

// components/com-float/com-float.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    position: {
      type: Object,
      value: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0
      } // left、top、right、bottom
    },
    left: {
      type: Number,
      value: 0
    },
    right: {
      type: Number,
      value: 0
    },
    top: {
      type: Number,
      value: 0
    },
    bottom: {
      type: Number,
      value: 0
    },
    h_margin: { // 水平方向（左右边距）
      type: Number,
      value: 20
    },
    v_margin: { // 垂直方向边距(上下边距)
      type: Number,
      value: 20
    }
  },
  data: {
    x: 999,
    y: 999,
    windowWidth: wx.getSystemInfoSync().windowWidth,
    windowHeight: wx.getSystemInfoSync().windowHeight,
    elementWidth: 0,
    elementHeight: 0
  },
  lifetimes: {
    attached() {
      // 初始化位置
      wx.createSelectorQuery().in(this).select('.com-float-box').boundingClientRect().exec((res) => {
        console.log(res);
        this.data.elementWidth = res[0].width;
        this.data.elementHeight = res[0].height;
        if (this.properties.position.left || this.properties.left) {
          this.data.x = this.properties.position.left || this.properties.left;
        }
        if (this.properties.position.right || this.properties.right) {
          this.data.x = this.data.windowWidth - this.data.elementWidth - (this.properties.position.right ? this.properties.position.right : this.properties.right);
        }
        if (this.properties.position.bottom || this.properties.bottom) {
          this.data.y = this.data.windowHeight - this.data.elementHeight - (this.properties.position.bottom ? this.properties.position.bottom : this.properties.bottom);
        }
        if (this.properties.position.top || this.properties.top) {
          this.data.y = this.properties.position.top || this.properties.top;
        }
        this.setData({
          elementWidth: this.data.elementWidth,
          elementHeight: this.data.elementHeight,
          x: this.data.x,
          y: this.data.y
        });
      });
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onTouchend(e) {
      console.log(e);
      const currentX = e.changedTouches[0].clientX;
      let currentY = e.changedTouches[0].clientY;
      if (currentY <= this.properties.v_margin) {
        currentY = this.properties.v_margin;
      }
      if (currentY > this.data.windowHeight - this.properties.v_margin) {
        currentY = this.data.windowHeight - this.properties.v_margin;
      }
      if (currentX + this.data.elementWidth / 2 > this.data.windowWidth / 2) {
        this.setData({
          x: this.data.windowWidth - this.properties.h_margin - this.data.elementWidth,
          y: currentY - this.data.elementHeight / 2 - 10
        });
      }
      if (currentX + this.data.elementWidth / 2 <= this.data.windowWidth / 2) {
        this.setData({
          x: this.properties.h_margin,
          y: currentY - this.data.elementHeight / 2 - 10
        });
      }
    }
  }
});
/* components/com-float/com-float.wxss */
movable-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;

  movable-view {
    pointer-events: auto; //可以点击
  }

  .com-float-box {
    display: inline-block;
  }
}



{
  "component": true,
  "usingComponents": {}
}

参考


最后一次编辑于  2024-01-18  
点赞 1
收藏
评论

1 个评论

请 登录 后发表内容
作者介绍

文章标签