UC浏览器上面有个问题

dmlzj commented 7 years ago

UC下没有出滚动条，手指滑动页面，整个页面会移动起来。别的浏览器下是没问题的，tabbar 和header都固定只有中间的有滚动条的才可以滑动是正确的！看了我的代码结构和demo一样的，你的demo就不会出现这个问题！好奇怪！！

"vux": "^2.1.1-rc.11"

airyland commented 7 years ago

Talk is cheap, show me code.

dmlzj commented 7 years ago

<template>
  <div style="height:100%;">
    <view-box ref="viewBox" :body-padding-top='paddingTop' body-padding-bottom='55px'>
      <x-header v-if="this.$store.state.user.userinfo.app_type=='app'" slot="header"
                :title="this.$store.state.global.page.title"
                :left-options="this.$store.state.global.page.left"

                :right-options="this.$store.state.global.page.right"
                style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
      <router-view></router-view>
      <tabbar icon-class="vux-center" slot="bottom" class="shanshou-tabbar">
        <tabbar-item link="/" :selected="$route.name === '闪收'">
          <span slot='icon'><x-icon type="shanshou_tab_shanshou" size="29"></x-icon></span>
          <span slot='icon-active'><x-icon type="shanshou_tab_shanshou" size="29" class="tabbar-active-icon"></x-icon></span>
          <span slot="label">闪收</span>
        </tabbar-item>
        <tabbar-item show-dot>
          <span slot='icon'><x-icon type="shanshou_tab_gongxiang" size="28"></x-icon></span>
          <span slot='icon-active'><x-icon type="shanshou_tab_gongxiang" size="28" class="tabbar-active-icon"></x-icon></span>
          <span slot="label">共享卡券</span>
        </tabbar-item>
        <tabbar-item  link="/notice/index">
          <span slot='icon'><x-icon type="shanshou_tab_tongzhi" size="26"></x-icon></span>
          <span slot='icon-active'><x-icon type="shanshou_tab_tongzhi" size="26" class="tabbar-active-icon"></x-icon></span>
          <span slot="label">通知</span>
        </tabbar-item>
        <tabbar-item badge="2" link="/user"　:selected="$route.name === '我'">
          <span slot='icon'><x-icon type="shanshou_tab_me" size="30"></x-icon></span>
          <span slot='icon-active'><x-icon type="shanshou_tab_me" size="30" class="tabbar-active-icon"></x-icon></span>
          <span slot="label">我</span>
        </tabbar-item>
      </tabbar>

    </view-box>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, ViewBox, XHeader } from 'vux'
export default {
  name: 'app',
  data () {
    return {
      title:"首页",
      paddingTop:this.$store.state.user.userinfo.app_type=='app'?'46px':'0px'
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    ViewBox,
    XHeader
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  background-color: #fbf9fe;
}
.vux-x-icon {
  fill: #585858;
}

.tabbar-active-icon{
  fill: #f4514e;
}
  .icon-center{vertical-align: middle}
</style>

dmlzj commented 7 years ago

正常是这样滑动后：

airyland commented 7 years ago

建个简单的可以重现的 repo。现在目测看不出什么问题。

dmlzj commented 7 years ago

找到问题了，，我页面里面加载了美恰客服，去掉就可以了，或者点击客服弹出下客服界面就不会这样了！还未发现为什么会这样！

airyland / vux

UC浏览器上面有个问题 #1274