commit

+<template>
+  <transition name="action-sheet-fade">
+    <Popup
+      class="yoho-action-sheet"
+      type="yoho-action-sheet"
+      :center="false"
+      :mask="true"
+      :z-index="zIndex"
+      v-show="isVisible"
+      @mask-click="maskClick"
+    >
+      <transition name="action-sheet-move">
+          <div class="detail" v-show="isVisible">
+            <slot></slot>
+          </div>
+      </transition>
+    </Popup>
+  </transition>
+</template>
+
+<script>
+import {Popup} from 'cube-ui';
+
+export default {
+  name: 'YohoActionSheet',
+  props: {
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  mounted() {
+    this.$watch('visible', (newVal) => {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }, {
+      immediate: true
+    });
+  },
+  components: {
+    Popup
+  },
+  methods: {
+    maskClick() {
+      this.maskClosable && this.cancel();
+    },
+
+    cancel() {
+      this.hide();
+      this.$emit('cancel');
+    },
+
+    show() {
+      this.isVisible = true;
+    },
+
+    hide() {
+      this.isVisible = false;
+    }
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+.action-sheet-fade-enter,
+.action-sheet-fade-leave-active {
+  opacity: 0;
+}
+
+.action-sheet-fade-enter-active,
+.action-sheet-fade-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.action-sheet-move-enter,
+.action-sheet-move-leave-active {
+  transform: translate3d(0, 100%, 0);
+}
+
+.action-sheet-move-enter-active,
+.action-sheet-move-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.yoho-action-sheet {
+  .cube-popup-content {
+    height: 100%;
+  }
+}
+
+.detail {
+  position: relative;
+}
+
+</style>

+import YohoActionSheet from './action-sheet';
+
+export default [YohoActionSheet];

@@ -3,11 +3,13 @@ import Images from './images';
 import Layouts from './layouts';
 import Products from './products';
 import Comments from './comments';
+import YohoActionSheet from './action-sheet';
 
 export default [
   ...Buttons,
   ...Images,
   ...Layouts,
   ...Products,
-  ...Comments
+  ...Comments,
+  ...YohoActionSheet
 ];

@@ -8,16 +8,69 @@
 </template>
 
 <script>
+
+import {Scroll, Loading} from 'cube-ui';
+
 export default {
   name: 'ArticlePage',
+  components: {
+    Loading,
+    Scroll
+  },
   data() {
     return {
-      shareData: {}
+      list: [],
+      scrollOptions: {
+        bounce: false
+      }
     };
+  },
+  methods: {
+    click() {
+      this.$refs.actionSheet.show();
+      setTimeout(() => {
+        this.initData();
+        this.forceUpdate();
+      }, 1000);
+    },
+    forceUpdate() {
+      this.$refs.scroll.forceUpdate();
+    },
+    initData() {
+      for (let i = 0; i < 100; i++) {
+        this.list.push(i);
+      }
+    }
+
   }
 };
 </script>
 
 <style>
+  .page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: gray;
+  }
+
+  .content {
+    width: 100%;
+    height: 100vh;
+    background-color: white;
+  }
+
+  .item {
+    background-color: white;
+  }
+
+  .loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
 </style>