在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---------------
{}