收藏
回答

navigationStyle custom 模式下,fixed定位抖动

框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
小程序 Bug 客户端 Android 6.6.7 1.9.90

在navigationStyle custom 模式下,我想通过fixed定位,自定义一个导航栏,但是,自定义的使用fixed定位的导航栏,在从其它页面,导航到此页面的时候,导航栏都会出现抖动的现象。

请在手机上看效果,只有才真机上,才会出现问题

机型:华为P10


下面是代码片段:


---------------example.js---------------

    Page({

    data: {

    testArray:[]

    },

    

    onLoad: function(){

    var array = [];

    //这里添加一个循环的目的,是为了让抖动的效果更加的明显,更容易发现问题

    //一定要到真机的环境测试,情况才能出现

    for (var i = 0; i < 10000; i++){

    array.push(i);

    }

    

    this.data.testArray = array;

    

    this.setData({

    testArray: this.data.testArray

    });

    }

    })


---------------example.wxml---------------

    <view>

    <view class='content'>

    1.当在真机上测试的时候,从别的页面导航到该页面,该页面底部 “我是fixed定位” 就会出现抖动, 具体表现是,一开始其位置在底部上面一点,过很短时间之后,又滑到到最底部的位置 2.当在开发者工具中测试的时候,不会出现抖动的问题

    </view>

    <view class="bottom">

    我是fixed定位

    <block wx:for="{{testArray}}">

    <view style='display:none'>111</view>

    </block>

    </view>

    </view>

    

---------------example.wxss---------------

    .head {

    text-align: center;

    height: 150rpx;

    line-height: 150rpx;

    background-color: pink;

    }

    

    .content{

    text-align: center;

    background-color: #ddd;

    height: 300rpx;

    padding-top: 200rpx;

    }

    

    .bottom {

    position: fixed;

    left: 0px;

    right: 0px;

    bottom: 0px;

    z-index: 999;

    font-size: 36rpx;

    min-height: 125rpx;

    background-color: yellow;

    font-weight: bold;

    text-align: center;

    line-height: 125rpx;

    }

        


---------------example.json---------------

{}



最后一次编辑于  2018-07-17
回答关注问题邀请回答
收藏

2 个回答

  • 拾级而上
    拾级而上
    2018-07-16

    这个代码分享,好像有问题,我分享了几次,打开都是乱码,我也不知到怎末回事

    2018-07-16
    有用
    回复 3
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-07-17

      你好,乱码目前没有好的办法可以解决,所以这边只能麻烦你重新提供下代码片段,麻烦也补充下出现问题的机型和微信版本,谢谢

      2018-07-17
      回复
    • 拾级而上
      拾级而上
      2018-07-17回复疯狂的小辣椒

      已经分享了,代码片段,请您查看

      2018-07-17
      回复
    • Layman
      Layman
      发表于移动端
      2020-04-11回复拾级而上
      你好,问题解决了吗?遇到同样问题
      2020-04-11
      回复
  • 是小白啊
    是小白啊
    2018-07-16

    你好,你所提供的代码片段无法正常运行,请重新提供一下

    2018-07-16
    有用
    回复 1
    • Layman
      Layman
      2020-04-11
      您好 请问这个问题解决了吗?
      2020-04-11
      回复
登录 后发表内容