微信小程式實現可長按移動控制元件

阿新 • • 發佈：2020-10-30

微信小程式可長按移動控制元件，供大家參考，具體內容如下

–包含超出邊界監測，效能不夠理想【原因：setData在毫秒級重新整理時會極大程度影響渲染效能】

Javascript

Page({
 /**
  * 頁面的初始資料
  */
 data: {
  //浮動按鈕座標
  flow_y: 130,flow_x: 20,pre_y:0,pre_x:0,//標記移動
  moveFlag: false,//標記控制元件是否可放置
  canNotPlace: false,imgSrc:"",},//長按按鈕移動控制元件
 longPress: function (e) {
  console.log(e)
  this.setData({
   moveFlag: true,pre_x:e.touches[0].clientX,pre_y:e.touches[0].clientY,})
  // console.log(e)
  console.log("begin:(",this.data.flow_x,this.data.flow_y,")")
  // this.setData({
  //  flow_x: 1334-e.touches[0].pageX,// 獲取觸控時的原點
  //  flow_y: 750-e.touches[0].pageY,// })
  //console.log(startX)

 },// 觸控結束事件
 touchEnd: function (e) {
  this.setData({
   moveFlag: false
  })

   // console.log("flow:(",")")
  //監測按鈕放置區域
  if (!((this.data.flow_x < 730) && (this.data.flow_x > 20))&&((this.data.flow_y < 1150) && (this.data.flow_y > 130))) {
   this.setData({
    flow_x: 20,// 轉換rpx
    flow_y: 130,})
  }
  // this.setData({
  //  flow_x: 20,// 轉換rpx
  // })
 },touchMove: function (e) {
  //根據move差值動態佈局
  if (this.data.moveFlag) {
   // console.log("page:(",e.touches[0].pageX,e.touches[0].pageY,")")
   // console.log(move_x,move_y)

   var x =this.data.flow_x -(e.touches[0].clientX-this.data.pre_x)*2
   var y =this.data.flow_y -(e.touches[0].clientY-this.data.pre_y)*2
   this.setData({
    flow_x: x,// 轉換rpx
    flow_y: y,})
   // console.log(x,y)
   // this.setData({
   //  flow_x: x,// 轉換rpx
   //  flow_y: y,// })
   if (!(((x < 730) && (x > 20))&&((y < 1000) && (y > 130)))) {
    this.setData({
     canNotPlace: true,})
   } else {
    this.setData({
     canNotPlace: false,})
   }
   this.setData({
    pre_x:e.touches[0].clientX,})
  }
 },catchtouchmove: function () {
  //防止蒙層觸控穿透
 },/**
  * 生命週期函式--監聽頁面載入
  */
 onLoad: function (options) {

 },/**
  * 生命週期函式--監聽頁面初次渲染完成
  */
 onReady: function () {
  wx.hideLoading()
 },/**
  * 生命週期函式--監聽頁面顯示
  */
 onShow: function () {

 },/**
  * 生命週期函式--監聽頁面隱藏
  */
 onHide: function () {

 },/**
  * 生命週期函式--監聽頁面解除安裝
  */
 onUnload: function () {

 },/**
  * 頁面相關事件處理函式--監聽使用者下拉動作
  */
 onPullDownRefresh: function () {
  this.getArticle()
 },/**
  * 頁面上拉觸底事件的處理函式
  */
 onReachBottom: function () {

 },/**
  * 使用者點選右上角分享
  */
 onShareAppMessage: function () {

 }
})

WXSS

.follow_icon{
 position: fixed;
 /* margin: 0 10rpx; */
 width:70rpx;
 height:70rpx;
 bottom: var(--flow_y--);
 right: var(--flow_x--);
 z-index: 1001;
}

/*mask*/
.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 5;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
}

WXML

<!-- 重新整理按鈕 -->
<!-- <view bindtap='getArticle' style="opacity:0.8"> -->
<view catchtouchmove="catchtouchmove" ><image bindtap='getArticle' bindlongpress="longPress" bindtouchmove='touchMove' bindtouchend="touchEnd" style="--flow_y--:{{flow_y}}rpx;--flow_x--:{{flow_x}}rpx;" class="follow_icon" src="{{imgSrc}}"></image></view>

<!-- 蒙版遮蔽，防止觸控穿透 -->
<view style="{{!canNotPlace?'background: #777;':'background: #b81e1e;'}}" catchtouchmove="catchtouchmove" class="drawer_screen" data-statu="open" wx:if="{{moveFlag}}"></view> 
<!-- </view> -->

微信小程式實現可長按移動控制元件