前言
今天使用uniapp开发时，选用navigator作为flex布局容器，内部元素水平排列，可是发现微信小程序生效，网页端不生效。
微信小程序效果如下：
网页端效果如下：
源代码如下：
<template>
<view class="root">
<text>navigator容器使用flex布局</text>
<navigator class="navigator-box">
<view class="box1"></view>
<view class="box2"></view>
<view class="box3"></view>
</navigator>
<text>view使用flex布局</text>
<view class="view-box">
<view class="box1"></view>
<view class="box2"></view>
<view class="box3"></view>
</view>
</view>
</template>
<style lang="scss" scoped>
.root {
// navigator标签设置flex布局在网页端不生效
.navigator-box {
// 设置水平flex布局
display: flex;
flex-direction: row;
}
.view-box {
// 设置水平flex布局
display: flex;
flex-direction: row;
}
.box1 {
background-color: red;
width: 100px;
height: 100px;
}
.box2 {
background-color: green;
width: 100px;
height: 100px;
}
.box3 {
background-color: blue;
width: 100px;
height: 100px;
}
text {
display: block;
margin: 20px 50px;
font-size: 20px;
}
}
</style>使用navigator标签要注意的坑
① navigator标签在非小程序端（如网页端、安卓端）不支持flex布局
② navigator标签在非小程序端（如网页端、安卓端）不支持css的一级子元素选择器（如 navigator>view，不能在网页端选中navigator标签内部的一级子元素view）
问题解决
如果需要对navigator内部的元素进行样式调整，就将navigator内部的所有元素用view容器包裹，然后对这个view容器进行css修饰
上面的代码出现的不兼容问题调整之后源码如下：
<template>
<view class="root">
<text>navigator容器使用flex布局</text>
<navigator class="navigator-box">
<!-- 将navigator内部所有元素用一个view容器包裹，然后对view容器单独修饰 -->
<view class="container">
<view class="box1"></view>
<view class="box2"></view>
<view class="box3"></view>
</view>
</navigator>
<text>view使用flex布局</text>
<view class="view-box">
<view class="box1"></view>
<view class="box2"></view>
<view class="box3"></view>
</view>
</view>
</template>
<style lang="scss" scoped>
.root {
.container {
display: flex;
flex-direction: row;
}
.view-box {
display: flex;
flex-direction: row;
}
.box1 {
background-color: red;
width: 100px;
height: 100px;
}
.box2 {
background-color: green;
width: 100px;
height: 100px;
}
.box3 {
background-color: blue;
width: 100px;
height: 100px;
}
text {
display: block;
margin: 20px 50px;
font-size: 20px;
}
}
</style>
