微信小程序测试：navigator组件使用flex布局不兼容问题及解决方案

最新推荐文章于 2024-05-14 15:09:24 发布

草灯

最新推荐文章于 2024-05-14 15:09:24 发布

阅读量6.4k

点赞数 4

分类专栏： web前端小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/eadio/article/details/53169145

版权

在微信小程序中，使用navigator配合flex布局时，出现安卓设备显示异常的问题。内容详细描述了这一现象，并提供了两种解决方案：一是将flex布局放在view组件中，navigator作为外层包裹；二是改用float或inline-block布局来实现相同效果。

摘要由CSDN通过智能技术生成

今天使用navigator+flex布局来做一个测试，结果发现安卓机子竟然无效，而在苹果机子上却是能正常一行显示的。测试代码如下：

 <navigator url="../../pages/Discount/Discount" style="padding:120rpx;background:#fff;width:200rpx;display:flex;flex-direction:row;">
        <view style="background:yellow;width:80rpx;height:80rpx">
            <image src='../../images/foot.png' mode="scaleToFill" style="width:50rpx;height:50rpx;"></image>
        </view>

        <view style="width:80rpx;">
            <image src='../../images/foot.png' mode="scaleToFill" style="width:50rpx;height:50rpx;"></image>
        </view>
    </navigator>

开发工具演示如下，正常：