成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xi4oh4o / 1087人閱讀

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

前言

先看效果

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

movable-view {
    pointer-events: auto; 
}

movable-area {
    pointer-events: none;
}
實現(xiàn)懸浮icon可垂直拖拽

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

因為是公共組件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) {
        // 設(shè)置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
        })
      }
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */

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

  /**
   * 組件的方法列表
   */
  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;
}
總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109177.html

相關(guān)文章

  • 微信小程序：截圖組件welCropper，實現(xiàn)原理及其使用

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

    jay_tian 評論0 收藏0

  • 全局拖拽上傳文件（類似百度網(wǎng)盤）的實現(xiàn)及踩坑

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

    shiguibiao 評論0 收藏0

  • 【CSS練習】IT修真院--練習4-移動端界面

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

    kun_jian 評論0 收藏0

  • 我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

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

    tulayang 評論0 收藏0

  • 我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

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

    JowayYoung 評論0 收藏0

發(fā)表評論

0條評論

xi4oh4o

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<