navigationStyle custom 模式下,fixed定位抖动
发布于 6 年前 作者 yongyu 16733 次浏览 来自 问答

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

{}

2 回复

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

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

回到顶部