小程序movable-area拖拽fixed點擊失效

xi4oh4o 發布于2019-08-26 13:37 / 1040人閱讀

摘要：前言先看效果實現了拖拽，但是可拖拽區域下層的點擊事件失效，本來做拖拽就是為了解決下層被遮擋然后無法點擊這下可好了，無法點擊的區域更高了。

前言

先看效果

實現了拖拽，但是可拖拽區域下層的點擊事件失效，本來做拖拽就是為了解決下層被遮擋然后無法點擊
這下可好了，無法點擊的區域更高了。還好從網上找到了解決辦法

movable-view {
    pointer-events: auto; 
}

movable-area {
    pointer-events: none;
}

實現懸浮icon可垂直拖拽

微信小程序自帶movable-area和movable-view完美的實現了
areaH為可移動的高度，這里獲取了手機設備的屏幕高度減去上下的留白，并且做了iPhoneX的適配
resetY是讓icons返回到初始位置
下圖藍色區域

因為是公共組件movable-view height就通過properties傳入了，本來打算通過小程序的boundingClientRect方法獲取，但是因為渲染速度慢，可能height為0，所以就老老實實傳入

// components/s-icon-btns/index.js
const App = getApp()
Component({
  /**
   * 組件的屬性列表
   */
  externalClasses: ["ex-class"],
  options: {
    multipleSlots: true
  },
  properties: {
    // 容器高度
    height: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {
        // 設置y初始位置
        this.setData({
          y: this.data.areaH - newVal
        })
      }
    },
    resetY: {
      // 與!wiggle
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        this.setData({
          y: this.data.areaH - this.data.height
        })
      }
    }
  },
  /**
   * 組件的初始數據
   */

  data: {
    iphoneX: App.globalData.isIphoneX,
    x: 10,
    areaH: App.globalData.isIphoneX
      ? App.globalData.mobile.windowHeight - 240
      : App.globalData.mobile.windowHeight - 180 //可動區域
  },

  /**
   * 組件的方法列表
   */
  methods: {}
})

.btns-bg {
    // position: fixed;
    // right: 10px;
    // bottom: 110px;
    // z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    width: 45px;
    min-height: 45px;
    border-radius: 45px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.07);
    &.lower {
        bottom: 61px;
    }
}

.x-class {
    margin-bottom: 68rpx;
}

movable-view {
    pointer-events: auto;
    width: 45px;
    padding: 10px;
    box-sizing: content-box;
}

movable-area {
    pointer-events: none;
    position: fixed;
    right: 0px;
    bottom: 70px;
    z-index: 1000;
    width: 65px;
    overflow: hidden;
}

總結

除了遇見的bug，其他的還是很簡單的方便的
如果有什么問題
歡迎留言或者添加微信討論

GPU云服務器云服務器拖拽式小程序制作小程序小程序小程序附近小程序門店小程序小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109177.html

微信小程序：截圖組件welCropper，實現原理及其使用

摘要：最近做項目的時候，需要做一個截圖功能。因為所以，就自己動手寫了一個截圖組件。下面介紹一下實現原理和使用方法。用來繪制適應屏幕比例大小的圖片，因為通常原圖大小是超過屏幕長寬的。 showImg(http://upload-images.jianshu.io/upload_images/2158535-2c383e1129188a2a.png?imageMogr2/auto-orient/...

jay_tian 2019-08-21 16:41 評論0 收藏0
全局拖拽上傳文件（類似百度網盤）的實現及踩坑

摘要：記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能兼容瀏覽器，以上。監聽上的事件，顯示拖拽的蒙層監聽目標節點上的拖拽事件。記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能,兼容瀏覽器，IE0以上。實現思路是，采用原聲的拖拽事件。監聽window上的dragenter事件，拖拽目標節點是fixed罩住頁面的dropZone節點。監聽window上的dragenter事件，顯示...

shiguibiao 2019-08-26 11:41 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0
我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...

tulayang 2019-08-30 14:02 評論0 收藏0
我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...

JowayYoung 2019-08-22 14:57 評論0 收藏0