From 1823aa00aeb4137291ac0bfc5f0eeec95e065f11 Mon Sep 17 00:00:00 2001
From: "23700113@qq.com" <283700113@qq.com>
Date: Wed, 23 Dec 2020 11:30:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E4=BF=AE=E5=A4=8DactionSheet?=
 =?UTF-8?q?=E5=9C=A8h5=E7=AB=AF=EF=BC=8C=E6=95=B0=E6=8D=AE=E9=87=8F?=
 =?UTF-8?q?=E5=A4=9A=E6=97=A0=E6=B3=95=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h5/components/app/popup/actionSheet.vue   | 162 +++++++++++++++++-
 1 file changed, 154 insertions(+), 8 deletions(-)

diff --git a/src/platforms/h5/components/app/popup/actionSheet.vue b/src/platforms/h5/components/app/popup/actionSheet.vue
index 83677ddff..1c61fc34a 100644
--- a/src/platforms/h5/components/app/popup/actionSheet.vue
+++ b/src/platforms/h5/components/app/popup/actionSheet.vue
@@ -12,7 +12,17 @@
       :style="popupStyle.content"
       class="uni-actionsheet"
     >
-      <div class="uni-actionsheet__menu">
+      <div
+        ref="main"
+        class="uni-actionsheet__menu"
+        @wheel="_handleWheel"
+      >
+        <!-- title占位 -->
+        <div
+          v-if="title"
+          class="uni-actionsheet__cell"
+          :style="{height:`${titleHeight}px`}"
+        />
         <div
           v-if="title"
           class="uni-actionsheet__title"
@@ -20,13 +30,21 @@
           {{ title }}
         </div>
         <div
-          v-for="(itemTitle, index) in itemList"
-          :key="index"
-          :style="{ color: itemColor }"
-          class="uni-actionsheet__cell"
-          @click="_close(index)"
+          :style="{maxHeight:`${HEIGHT}px`,overflow:'hidden'}"
         >
-          {{ itemTitle }}
+          <div
+            ref="content"
+          >
+            <div
+              v-for="(itemTitle, index) in itemList"
+              :key="index"
+              :style="{ color: itemColor }"
+              class="uni-actionsheet__cell"
+              @click="_close(index)"
+            >
+              {{ itemTitle }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="uni-actionsheet__action">
@@ -49,11 +67,50 @@
 <script>
 import popup from './mixins/popup'
 import keypress from '../../../helpers/keypress'
+import touchtrack from 'uni-mixins/touchtrack'
+import scroller from 'uni-mixins/scroller/index'
+import {
+  Friction
+} from 'uni-mixins/scroller/Friction'
+import {
+  Spring
+} from 'uni-mixins/scroller/Spring'
+import {
+  initScrollBounce,
+  disableScrollBounce
+} from 'uni-platform/helpers/scroll'
+
+// 由于模拟滚动阻止了点击，使用自定义事件来触发点击事件
+function initClick (dom) {
+  const MAX_MOVE = 20
+  let x = 0
+  let y = 0
+  dom.addEventListener('touchstart', (event) => {
+    const info = event.changedTouches[0]
+    x = info.clientX
+    y = info.clientY
+  })
+  dom.addEventListener('touchend', (event) => {
+    const info = event.changedTouches[0]
+    if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
+      const customEvent = new CustomEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        target: event.target,
+        currentTarget: event.currentTarget
+      });
+      ['screenX', 'screenY', 'clientX', 'clientY', 'pageX', 'pageY'].forEach(key => {
+        customEvent[key] = info[key]
+      })
+      event.target.dispatchEvent(customEvent)
+    }
+  })
+}
 
 export default {
   name: 'ActionSheet',
   components: { keypress },
-  mixins: [popup],
+  mixins: [popup, touchtrack, scroller],
   props: {
     title: {
       type: String,
@@ -78,9 +135,87 @@ export default {
       default: false
     }
   },
+  data () {
+    return {
+      HEIGHT: 260,
+      contentHeight: 0,
+      titleHeight: 0,
+      deltaY: 0,
+      scrollTop: 0
+    }
+  },
+  watch: {
+    visible (newValue) {
+      if (newValue) {
+        this.$nextTick(() => {
+          // title 占位
+          if (this.title) { this.titleHeight = document.querySelector('.uni-actionsheet__title').offsetHeight }
+          // 滚动条更新
+          this._scroller.update()
+          // 获取contentHeight 滚动时使用
+          this.contentHeight = this.$refs.content.clientHeight - this.HEIGHT
+          // 给每一个项添加点击事件
+          document.querySelectorAll('.uni-actionsheet__cell').forEach(item => {
+            initClick(item)
+          })
+        })
+      }
+    }
+  },
+  mounted () {
+    // 模拟滚动使用
+    this.touchtrack(this.$refs.content, '_handleTrack', true)
+    this.$nextTick(() => {
+      this.initScroller(this.$refs.content, {
+        enableY: true,
+        friction: new Friction(0.0001),
+        spring: new Spring(2, 90, 20),
+        onScroll: (e) => {
+          this.scrollTop = e.target.scrollTop
+        }
+      })
+    })
+    initScrollBounce()
+  },
   methods: {
     _close (tapIndex) {
       this.$emit('close', tapIndex)
+    },
+    _handleTrack: function (e) {
+      if (this._scroller) {
+        switch (e.detail.state) {
+          case 'start':
+            this._handleTouchStart(e)
+            disableScrollBounce({
+              disable: true
+            })
+            break
+          case 'move':
+            this._handleTouchMove(e)
+            break
+          case 'end':
+          case 'cancel':
+            this._handleTouchEnd(e)
+            disableScrollBounce({
+              disable: false
+            })
+        }
+      }
+    },
+    _handleWheel ($event) {
+      const deltaY = this.deltaY + $event.deltaY
+      if (Math.abs(deltaY) > 10) {
+        this.scrollTop += deltaY / 3
+        this.scrollTop = this.scrollTop >= this.contentHeight
+          ? this.contentHeight
+          : this.scrollTop <= 0
+            ? 0
+            : this.scrollTop
+        this._scroller.scrollTo(this.scrollTop)
+      } else {
+        this.deltaY = deltaY
+      }
+      $event.preventDefault()
     }
   }
 }
@@ -133,6 +268,17 @@ uni-actionsheet .uni-actionsheet__title {
   cursor: pointer;
 }
 
+uni-actionsheet .uni-actionsheet__title{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid #e5e5e5;
+}
+
 uni-actionsheet .uni-actionsheet__cell:before {
   content: " ";
   position: absolute;
-- 
GitLab