keyboard

build/webpack.prod.conf.js

@@ -38,8 +38,8 @@ const webpackConfig = merge(baseWebpackConfig, {
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false,
-        drop_debugger: true,
-        drop_console: true
+        drop_debugger: !env.debug,
+        drop_console: !env.debug
       },
       sourceMap: config.build.productionSourceMap,
       parallel: true

config/uat.env.js

@@ -2,7 +2,7 @@
 module.exports = {
   NODE_ENV: '"production"',
   CONFIG_ENV: JSON.stringify(process.env.CONFIG_ENV),
-  debug: false,
+  debug: true,
   isMobilePlatform: true,
   appCode:'"HLS_APP"',
   clearTable: true,

packages/common/scripts/hlsPopup.js

@@ -43,13 +43,13 @@ export default {
         Vue.$vux.loading.hide()
         vm.isLoading = false
         // 弹出操作失败
-        Vue.$vux.toast.show({
+        /* Vue.$vux.toast.show({
           text: '操作失败',
           type: 'warn',
           time: vm.SHOW_TIMES,
           isShowMask: vm.IS_SHOW_MASK,
           position: 'middle',
-        })
+        }) */
       }
     }, 10000)
   },

packages/common/styles/ionic-public-style.less

 .has-footer {
-  padding-bottom: 0.88rem;    
+  padding-bottom: 0.88rem;
   .scrollContent{
-    padding-bottom: 1.76rem;
+    padding-bottom: 0.88rem;
   }
 
 }

packages/common/styles/ionic.less

@@ -4087,6 +4087,7 @@ html {
   overflow: hidden;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
+  overflow: hidden;
 }
 
 body{

packages/common/styles/platform-ios.less

@@ -6,7 +6,7 @@
   .has-footer {
    // padding-bottom: 2.16rem;
     .scrollContent{
-      padding-bottom: 2.16rem;
+      padding-bottom: 0.88rem;
     }
 
   }

packages/common/styles/platform-iosx.less

@@ -9,8 +9,8 @@
     }
     .has-footer {
      // padding-bottom: 2.84rem;
-      .scrollContent{
-        padding-bottom: 2.84rem;
+      .scrollContent {
+        padding-bottom: 1.44rem;
       }
 
     }
@@ -36,7 +36,7 @@
     .has-footer {
      // padding-bottom: 2.84rem;
       .scrollContent{
-        padding-bottom: 2.84rem;
+        padding-bottom: 1.44rem;
       }
 
     }

packages/components/BottomTab/index.vue

@@ -32,7 +32,7 @@ export default {
     width: 100%;
     background-color: #fff;
     position: fixed;
-    z-index: 100;
+    z-index: 5;
     bottom: 0;
     display: flex;
     align-items: center;

packages/components/HContent/index.vue

@@ -26,13 +26,18 @@ export default {
     flex: 1;
     overflow: hidden;
     background-color: #fafafa;
-    position: relative;
     overflow-y: scroll;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
   }
 
+  .platform-ios {
+    .has-header{
+      top:64px
+    }
+  }
+
   // iPhoneX适配
   @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .platform-ios {

packages/components/HContent/index.vue.scroll

+
+/**
+* better-scroll vue封装
+* @Author momoko
+* @Date 2018/05
+*/
+
+<template>
+  <div ref="scroll" :class="[{'h-ios': isIos}]" class="content">
+    <div class="vue-better-scroll__wrapper">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from 'better-scroll'
+import {base} from '../../common/mixins'
+
+import { detectOS } from '../../common/utils/index'
+
+export default {
+  name: 'HContent',
+  mixins: [base],
+  props: {
+    preventDefaultException: {
+      // 不阻止默认行为
+      type: Object,
+      default: () => ({
+        tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/,
+      }),
+    },
+  },
+  data () {
+    return {
+      isIos: false,
+      fullScreen: true,
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+
+  created () {
+    this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
+  },
+  async mounted () {
+    this.initScroll()
+  },
+  methods: {
+    // 初始化scroll
+    initScroll () {
+      if (!this.$refs.scroll) return
+
+      const options = {
+        probeType: 1,
+        click: true,
+        scrollX: false,
+        scrollY: true,
+        scrollbar: false,
+        pullDownRefresh: false,
+        pullUpLoad: false,
+        startY: 0,
+        bounce: true,
+        bounceTime: 500,
+        preventDefaultException: this.preventDefaultException,
+      }
+
+      this.scroll = new BScroll(this.$refs.scroll, options)
+    },
+
+    // 关闭滚动
+    disable () {
+      this.scroll && this.scroll.disable()
+    },
+    // 开启滚动
+    enable () {
+      this.scroll && this.scroll.enable()
+    },
+    // 销毁滚动示例
+    destroy () {
+      this.scroll && this.scroll.destroy()
+    },
+    /**
+       * 每次滚动多少距离
+       * @param  {Number} x    x轴位置
+       * @param  {Number} y    y轴位置
+       * @param  {Number} time 滚动时间
+       * @return {Void}
+       */
+    scrollBy (x = 0, y = 0, time = this.bounceTime) {
+      this.scroll && this.scroll.scrollTo((this.scroll.absStartX - x), (this.scroll.absStartY - y), time)
+    },
+    /**
+       * 滚动到指定位置
+       * @param  {Number} x    x轴位置
+       * @param  {Number} y    y轴位置
+       * @param  {Number} time 滚动时间
+       * @return {Void}
+       */
+    scrollTo (x = 0, y = 0, time = this.bounceTime) {
+      this.scroll && this.scroll.scrollTo(x, y, time)
+    },
+    // 滚动到元素
+    scrollToElement () {
+      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
+    },
+    // 滚动到顶部
+    scrollToTop () {
+      this.scroll && this.scrollTo(0, 0)
+    },
+    // 滚动到底部
+    scrollToBottom () {
+      this.scroll && this.scrollTo(0, this.scroll.maxScrollY)
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+  //$ = vue-better-scroll
+  .vue-better-scroll {
+    width 100%
+    overflow hidden
+    box-sizing border-box
+    position relative
+    height 100%
+
+    &__wrapper {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-touch-callout: none;
+      -webkit-text-size-adjust: none;
+      -moz-text-size-adjust: none;
+      text-size-adjust: none;
+      -webkit-transform-origin: left top;
+      transform-origin: left top;
+      padding-bottom: 0.9rem;
+    }
+
+    &__pullup {
+      width 100%
+      height 25px
+      display flex
+      justify-content center
+      align-items center
+      font-size 14px
+      color rgb(153, 153, 153)
+    }
+
+    &__pulldown {
+      position absolute
+      left 0
+      top -50px; /*no*/
+      width 100%
+      display flex
+      justify-content center
+      align-items center
+      transition all
+      font-size 14px
+      color rgb(153, 153, 153)
+
+      &__before {
+        display flex
+      }
+
+      &__after {
+        width 100%
+        height 40px; /*no*/
+        display flex
+        justify-content center
+        align-items center
+        color #666
+      }
+    }
+  }
+
+  .platform-ios{
+    .vue-better-scroll {
+      &__wrapper {
+        //  padding-bottom: 2.16rem;
+      }
+    }
+  }
+  // iPhoneX适配
+  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+    .platform-ios {
+      .vue-better-scroll {
+        &__wrapper {
+          //  padding-bottom: 2.84rem;
+        }
+      }
+    }
+  }
+
+  // iPhoneX Max适配
+  @media (device-width: 414px) and (device-height: 896px)  {
+    .platform-ios {
+      .vue-better-scroll {
+        &__wrapper {
+          // padding-bottom: 2.84rem;
+        }
+      }
+    }
+  }
+</style>

packages/components/Scroll/index.vue

@@ -5,10 +5,15 @@
 */
 
 <template>
-  <div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content scroll-content">
+  <div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content">
 
     <div :class="c('__wrapper')">
-      <div ref="scrollContent" class="scrollContent">
+      <div
+        ref="scrollContent" class="scrollContent"
+        @touchend="end"
+        @touchcancel="end"
+        @mouseup="end"
+        @mouseleave="end">
         <slot/>
       </div>
 
@@ -57,10 +62,11 @@ import BScroll from 'better-scroll'
 import Loading from './loading'
 import Bubble from './bubble'
 import mixin from './mixins'
-import {timeout} from './utils'
+import { timeout } from './utils'
 
 import { detectOS } from '../../common/utils/index'
-
+let currenTranslateY = 0
+let scollHeight = 0
 export default {
   name: 'Scroll',
   components: {
@@ -128,7 +134,7 @@ export default {
       type: Object,
       default: () => ({
         threshold: 100, // 提前触发 pullingUp 的距离
-        txt: {more: '上拉加载', noMore: '— 我是有底线的 —'},
+        txt: { more: '上拉加载', noMore: '— 我是有底线的 —' },
       }),
     },
     startY: {
@@ -188,6 +194,7 @@ export default {
       bubbleY: 0, // 气泡y坐标,
       isIos: false,
       fullScreen: true,
+
     }
   },
   computed: {
@@ -214,6 +221,7 @@ export default {
       await this.$nextTick()
       this.refresh()
     },
+
   },
 
   created () {
@@ -230,6 +238,22 @@ export default {
     }, {
       deep: true,
     })
+
+    window.addEventListener('native.keyboardhide', function (e) {
+      console.log('native.keyboardhide')
+      /* if (currenTranslateY) {
+        this.$refs.scrollContent.style.paddingBottom = '0px'
+        this.scrollTo(0, -(currenTranslateY))
+      } */
+    })
+    window.addEventListener('native.keyboardshow', function (e) {
+      console.log('native.keyboardshow')
+      console.log('scollHeight:' + scollHeight)
+      console.log('currenTranslateY:' + currenTranslateY)
+      /* if (currenTranslateY && scollHeight) {
+        this.scrollTo(0, -(currenTranslateY + scollHeight))
+      } */
+    })
   },
   methods: {
     // 初始化scroll
@@ -385,6 +409,7 @@ export default {
        */
     scrollTo (x = 0, y = 0, time = this.bounceTime) {
       this.scroll && this.scroll.scrollTo(x, y, time)
+      console.log(y)
     },
     // 滚动到元素
     scrollToElement () {
@@ -398,6 +423,36 @@ export default {
     scrollToBottom () {
       this.scroll && this.scrollTo(0, this.scroll.maxScrollY)
     },
+    getKeyboardHeight () {
+      let innerWidth = window.innerWidth
+      if (this.isIos) {
+        if (innerWidth >= 375 && innerHeight >= 812) {
+          return 400
+        }
+        return 370
+      } else {
+        return 275
+      }
+    },
+    start (e) {
+
+    },
+    end: function (e) {
+      if (e.target.readOnly) return
+      if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
+        const vueScrollElement = this.$refs.scroll.children[0]
+        currenTranslateY = Number(vueScrollElement.style.transform.match(/\d+(.\d+)?/g)[1])
+        const pointY = e.changedTouches[0].clientY
+        const innerHeight = window.innerHeight
+        const keyBoardHeight = this.getKeyboardHeight()
+        scollHeight = (innerHeight - pointY) < keyBoardHeight ? (keyBoardHeight - (innerHeight - pointY)) : 0
+        if (scollHeight) {
+          this.$refs.scrollContent.style.paddingBottom = (currenTranslateY + scollHeight) + 'px'
+          this.scrollTo(0, -(currenTranslateY + scollHeight))
+        }
+      }
+    },
+
   },
 }
 </script>
@@ -410,6 +465,7 @@ export default {
     box-sizing border-box
     position relative
     height 100%
+    overflow-y hidden !important
 
     &__wrapper {
       -webkit-user-select: none;
@@ -422,7 +478,6 @@ export default {
       text-size-adjust: none;
       -webkit-transform-origin: left top;
       transform-origin: left top;
-      padding-bottom: 0.9rem;
     }
 
     &__pullup {
@@ -462,30 +517,31 @@ export default {
     }
   }
 
-   .platform-ios{
-     .vue-better-scroll {
-       &__wrapper {
+  .platform-ios {
+    .vue-better-scroll {
+      &__wrapper {
         //  padding-bottom: 2.16rem;
-       }
-     }
-   }
+      }
+    }
+  }
+
   // iPhoneX适配
   @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .platform-ios {
       .vue-better-scroll {
         &__wrapper {
-        //  padding-bottom: 2.84rem;
+          //  padding-bottom: 2.84rem;
         }
       }
     }
   }
 
   // iPhoneX Max适配
-  @media (device-width: 414px) and (device-height: 896px)  {
+  @media (device-width: 414px) and (device-height: 896px) {
     .platform-ios {
       .vue-better-scroll {
         &__wrapper {
-         // padding-bottom: 2.84rem;
+          // padding-bottom: 2.84rem;
         }
       }
     }

packages/components/component.js

@@ -25,6 +25,7 @@ export default (Vue) => {
   Vue.component('h-view', HView)
   Vue.component('h-header', HHeader)
   Vue.component('h-content', HContent)
+  Vue.component('s-content', Scroll)
   Vue.component('scroll', Scroll)
   Vue.component('number-keyboard', NumberKeyboard)
   Vue.component('item-option', ItemOption)

src/App.vue

@@ -66,10 +66,11 @@ export default {
 </script>
 
 <style lang="less">
-  html, body, #app {
+  #app {
     height: 100%;
     width: 100%;
     overflow-x: hidden;
+    position: absolute;
     //overflow: auto;
     //-webkit-overflow-scrolling: touch;
     //overflow-scrolling: touch;

src/main.js

@@ -104,7 +104,8 @@ FastClick.attach(document.body)
 Vue.config.productionTip = false
 
 vum.$vumPlatform.ready(function () {
-  if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) {
+  if (process.env.isMobilePlatform) {
+    cordova.plugins.Keyboard.disableScroll(true)
   }
 })
 

src/pages/hlsPopup.vue

@@ -23,7 +23,7 @@
       <tab-item>涉诉公告</tab-item>
       <tab-item>司法协助</tab-item>
     </s-tab>-->
-    <h-content class="has-footer">
+    <s-content class="has-footer">
       <h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
       <h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button>
       <h-button class="button-class" type="primary" @click.native="showLongTop">showLongTop</h-button>
@@ -240,7 +240,7 @@
       <h2 class="item-title">Modal</h2>
       <h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
 
-    </h-content>
+    </s-content>
 
     <bottom-tab :show-divider="true">
       <tab-button cusClass="button-exit" @click.native="showConfirm"><img

src/pages/home.vue

@@ -6,7 +6,7 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
-    <h-content id="home-content">
+    <scroll id="home-content" class="has-footer">
       <div v-for="item in message" class="message">
         <p v-show="false" class="message-time" v-text="item.time"/>
         <div v-show="!item.isFromeMe" class="message-wrap">
@@ -21,7 +21,34 @@
           <p class="message-right" v-text="item.content"/>
         </div>
       </div>
-    </h-content>
+      <input style="width: 100%;height: 50px;margin-top: 300px">
+      <list-item>
+        <item>
+          <div slot="name">客户名称</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">蜘蛛侠</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">蝙蝠侠</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">超人</div>
+          <input slot="content" type="text" placeholder="请输入" readonly>
+        </item>
+        <item>
+          <div slot="name">钢铁侠</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">美队</div>
+          <input slot="content"  type="text" placeholder="请输入">
+        </item>
+      </list-item>
+    </scroll>
     <bottom-tab class="bar bar-footer bar-light">
       <label class="item item-input footer-input">
         <textarea