在vue2.5，iphone7plus的微信公共号中使用会出现闪烁

tianlu1677 commented 6 years ago

// 修复IOS滑动效果
import EdgeCheck from 'vue-edge-check'
Vue.use(EdgeCheck, {edge_duration: 1000})

我在App.vue 中使用

<template>
  <div id="app">
    <transition name="slide">
      <!-- <navigation> -->
      <!--<keep-alive>-->
      <div :class="{'is-edge-back':$isEdgeLeft,'is-edge-forward':$isEdgeRight}">
        <router-view></router-view>
      </div>
      <!--</keep-alive>-->
      <!-- </navigation> -->
    </transition>
    <loading v-model="isLoading"></loading>
    <share-dialog v-show="showShare"></share-dialog>
  </div>
</template>

<script>
  import {Loading} from 'vux'
  import {mapGetters} from 'vuex'

  export default {
    name: 'App',
    components: {
      Loading
    },
    computed: {
      ...mapGetters({
        showShare: 'showShare',
        isLoading: 'isLoading'
      })
    }
  }
</script>

<style lang="scss">
  // ORIGIN: set slide transition effect time
  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
  }

  // ORIGIN: add slide transition effect
  .slide-enter,
  .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }

  // EXTRA: this component should have no transition with edge forward/back
  .is-edge-forward.slide-enter-active,
  .is-edge-back.slide-leave-active {
    transition: all 0s;
  }

  // EXTRA: this component should not display at slide-leave start
  // or else it will blink
  .is-edge-back.slide-leave {
    transform: translate3d(100%, 0, 0);
  }

  // EXTRA: this component should display and not move at slide-enter start
  // or else it will jump
  .is-edge-forward.slide-enter {
    transform: translate3d(0, 0, 0);
  }
</style>

gu-fan commented 6 years ago

有demo地址吗？我试试

tianlu1677 commented 6 years ago

地址 https://xinxue.niubibeta.com/web/home
或者微信中搜索微信公共号每日新学

在手机端QQ浏览器也试过，是同样的问题。

gu-fan commented 6 years ago

我看你没有页面切换的动效啊？

gu-fan / vue-edge-check

在vue2.5，iphone7plus的微信公共号中使用会出现闪烁 #1