亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

小程序movable-area拖拽fixed點(diǎn)擊失效

xi4oh4o / 1123人閱讀

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

前言

先看效果

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

movable-view {
    pointer-events: auto; 
}

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

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

因?yàn)槭枪步M件movable-view height就通過(guò)properties傳入了，本來(lái)打算通過(guò)小程序的boundingClientRect方法獲取，但是因?yàn)殇秩舅俣嚷?，可能height為0，所以就老老實(shí)實(shí)傳入


  
    
      
    
  

// 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 //可動(dòng)區(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é)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109177.html

相關(guān)文章

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

    摘要：最近做項(xiàng)目的時(shí)候，需要做一個(gè)截圖功能。因?yàn)樗?，就自己?dòng)手寫了一個(gè)截圖組件。下面介紹一下實(shí)現(xiàn)原理和使用方法。用來(lái)繪制適應(yīng)屏幕比例大小的圖片，因?yàn)橥ǔＴ瓐D大小是超過(guò)屏幕長(zhǎng)寬的。 showImg(http://upload-images.jianshu.io/upload_images/2158535-2c383e1129188a2a.png?imageMogr2/auto-orient/...

    jay_tian 評(píng)論0 收藏0

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

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

    shiguibiao 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

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

    kun_jian 評(píng)論0 收藏0

  • 我是如何通過(guò)debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁(yè)面滾動(dòng)后touch事件失效問(wèn)題

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

    tulayang 評(píng)論0 收藏0

  • 我是如何通過(guò)debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁(yè)面滾動(dòng)后touch事件失效問(wèn)題

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

    JowayYoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<