微信小程序中悬浮窗功能的实现（主要探讨和解决在原生组件上的拖动）

2019 年 10 月 3 日
筆記

????

???????????????????fixed??????????

????????????????

?????cover-view??????????????~

???????????cover-view???view?

??????????

index.wxml:

<view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">      <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">      </image>  </view>  <textarea placeholder='??textarea???????????'></textarea>  <view>    ???test???????????  </view>

index.js:

Page({      /**    * ???????    */    data: {      left: 20,      top: 250,      isIos: true    },    /**    * ????    */    setTouchMove: function (e) {      if (e.touches[0].clientX > 0 && e.touches[0].clientY > 0) {        this.setData({          left: e.touches[0].clientX - 30,          top: e.touches[0].clientY - 30        })      } else {        this.setData({          left: 20, //?????? left??          top: 250  //?????? top??        })      }    },    /**    * ????    */    goToHome: () => {      wx.reLaunch({        url: '/pages/index/index',      })    }  })

?????cover-view??

???????textarea??????????????????????textarea????????????????

????????????textarea??????????????????????

????????????????????????????????????????????

??????????????????????????????????????????ios?Echarts????????????

??????????????????????????view???????

???????????????????cover-view?????????????????

????cover-view????????????????????

????????cover-view??????

<cover-view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">      <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">      </cover-image>  </cover-view>  <textarea placeholder='??textarea???????????'></textarea>  <view>    ???test???????????  </view>

????????image????cover-image???cover-view????? cover-view?cover-image????? cover-view ??? button?

??????????????????????????????????????????????????????????????

??????????????????????????????????????????????????????

?????????????????????????????

???ios?cover-view????????????????????????????

?????????

???????????????

????????????ios??cover-view??????????view????

<cover-view wx-if="{{isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">      <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">      </cover-image>  </cover-view>  <view wx-if="{{!isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">      <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">      </image>  </view>  <textarea placeholder='??textarea???????????'></textarea>  <view>    ???test???????????  </view>

???????js?????????

onLoad: function (options) {    wx.getSystemInfo({      success: (res) => {        if (res.platform == "android") {          this.setData({            isIos: false          })        }      }    })  }

????isIos???true??

??ios??????????????????textarea??????????????????????????

???????????textarea????????????textarea???????????

???????????????????????????????????????????????

??????????????????????????????????????????????????????????????????

??movable-view?????????????????????

?????????????????

?????????????????????????????

??????????????????????????????movable-view?

?????cover-view???????????????????????????????????????????

????????????????????textarea????

????????????????????????????????????????????????

???????????????????????????????

??????????????????????

?????????????????????????????

?????????????????????????????????????????

?????????????????????????????????????????????

????????????????????????????????????????

???????????????????????????

index.wxml:

<view bindtouchmove="setTouchMove">      <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome">          <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">          </image>      </view>      <textarea placeholder='??textarea???????????'></textarea>      <view>        ???test???????????      </view>  </view>

index.js:

Page({      /**    * ???????    */    data: {      left: 20,      top: 250    },      /**    * ????    */    setTouchMove: function (e) {      const MOVE_VIEW_RADIUS = 30 // ?????        const touchPosX = e.touches[0].clientX      const touchPosY = e.touches[0].clientY        const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS      const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS        // ??????????????      if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS + 60 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS + 60) {        if (touchPosX > 0 && touchPosY > 0) {          this.setData({            left: touchPosX - MOVE_VIEW_RADIUS,            top: touchPosY - MOVE_VIEW_RADIUS          })        } else {          this.setData({            left: 20, // ?????? left??            top: 250  // ?????? top??          })        }      }    },    /**    * ????    */    goToHome: () => {      wx.reLaunch({        url: '/pages/index/index',      })    }  })

??????????

// ??????????????  if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS + 60 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS + 60) {    }

??????????????????????????60?????????????????????????????????????????????????

??????????????????60??????????????????????????????

1.?????????????????????????????????????
2.???????????????????????,????????60?????????????????
2.??????????????????????????????????????????????????????????????

?????????????? + ????

????????????????????????????????

?????

index.wxml?

<view bindtouchmove="handleSetMoveViewPos">      <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">          <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">          </image>      </view>      <textarea placeholder='??textarea???????????'></textarea>      <view>        ???test???????????      </view>  </view>

index.js?

Page({    /**    * ???????    */    data: {      left: 20,      top: 250    },    /**    * ????(??)    */    handleSetMoveViewPos: function (e) {      const MOVE_VIEW_RADIUS = 30 // ?????        const touchPosX = e.touches[0].clientX      const touchPosY = e.touches[0].clientY        const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS      const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS        // ??????????????      if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS+30 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS+30 ) {        if (touchPosX > 0 && touchPosY > 0) {          this.setData({            left: touchPosX - MOVE_VIEW_RADIUS,            top: touchPosY - MOVE_VIEW_RADIUS          })        } else {          this.setData({            left: 20, // ?????? left??            top: 250  // ?????? top??          })        }      }    },    /**    * ????    */    handleTouchMove: function (e) {      const MOVE_VIEW_RADIUS = 30 // ?????        const touchPosX = e.touches[0].clientX      const touchPosY = e.touches[0].clientY        if (touchPosX > 0 && touchPosY > 0) {        this.setData({          left: touchPosX - MOVE_VIEW_RADIUS,          top: touchPosY - MOVE_VIEW_RADIUS        })      } else {        this.setData({          left: 20, //?????? left??          top: 250  //?????? top??        })      }    },    /**    * ????    */    goToHome: () => {      wx.reLaunch({        url: '/pages/index/index',      })    }  })

???????????catchtouchmove="handleTouchMove" ?

??????????????catchtouchmove????????????????????????????????????????????????

???????????????????????????????????handleTouchMove???????????????handleSetMoveViewPos???

???????????????handleSetMoveViewPos??????????60??????30????????????????????????????????????????????????????????

??????????????????????????????????????

?????????????????????ios?????????????????????????????

???????????

??????????????????

???????????????????????????????

?????

index.wxml:

<view bindtouchmove="handleSetMoveViewPos">      <view wx-if="{{!isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">          <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">          </image>      </view>      <cover-view wx-if="{{isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">          <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">          </cover-image>      </cover-view>      <textarea placeholder='??textarea???????????'></textarea>      <view>        ???test???????????      </view>  </view>

index.js:

Page({      /**    * ???????    */    data: {      left: 20,      top: 250,      isIos: true    },      /**    * ??????--??????    */    onLoad: function (options) {      wx.getSystemInfo({        success: (res) => {          if (res.platform == "android") {            this.setData({              isIos: false            })          }        }      })    },      /**    * ????(??)    */    handleSetMoveViewPos: function (e) {      // ?ios?????????????????????      if (!ios) {        const MOVE_VIEW_RADIUS = 30 // ?????          const touchPosX = e.touches[0].clientX        const touchPosY = e.touches[0].clientY          const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS        const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS          // ??????????????        if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS) {          if (touchPosX > 0 && touchPosY > 0) {            this.setData({              left: touchPosX - MOVE_VIEW_RADIUS,              top: touchPosY - MOVE_VIEW_RADIUS            })          } else {            this.setData({              left: 20, // ?????? left??              top: 250  // ?????? top??            })          }        }      }    },    /**    * ????    */    handleTouchMove: function (e) {      const MOVE_VIEW_RADIUS = 30 // ?????        const touchPosX = e.touches[0].clientX      const touchPosY = e.touches[0].clientY        if (touchPosX > 0 && touchPosY > 0) {        this.setData({          left: touchPosX - MOVE_VIEW_RADIUS,          top: touchPosY - MOVE_VIEW_RADIUS        })      } else {        this.setData({          left: 20, //?????? left??          top: 250  //?????? top??        })      }    },    /**    * ????    */    goToHome: () => {      wx.reLaunch({        url: '/pages/index/index',      })    }  })

?????????ios?????cover-view????????android?????????????view????????????????????????????????????????

??

??????????????????????

??????????????????cover-view???????BUG??????????????????2018?11??????2019?8???????

????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????