小程序开发填坑《二》navigator组件使用flex布局不兼容问题及解决方案

发布：2018-01-25 11:01浏览：次来源：网络作者：tianshu

今天使用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>

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

安卓机子演示如下，右侧掉了：

苹果机子演示如下，正常：

综合上面，解决方案是不把flex布局写在navigator组件，而是写在view组件上，外层链接用navigator组件包含，最终代码如下：

<navigator url="../../pages/Discount/Discount">
<view 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>
</view>
</navigator>

第二种，不用flex布局，使用float浮动布局，或者是 inline-block布局

float布局，注意父元素清除浮动，否则导致高度塌陷：

<navigator url="../../pages/Discount/Discount" class="clearfix" style="padding:120rpx;background:#fff;width:200rpx;">
<view style="float:left;background:yellow;width:80rpx;height:80rpx">
222
</view>
<view style="float: right;width:80rpx; background: red;">
111
</view>
lt;/navigator>

inline-block布局

<navigator url="../../pages/Discount/Discount" style="padding:120rpx;background:#fff;width:200rpx;">
<view style="display: inline-block;background:yellow;width:80rpx;height:80rpx">
222
</view>
<view style="display:inline-block;width:80rpx; background: red;">
111
</view>
lt;/navigator>

复制代码

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。