nvue页面中如何设置行内布局？

分类：nvue

nvue_flex nvue

各位大神，感谢阅读
事情是这样的：
我设置的主页是index.nvue，然后在此页面添加了一个uni-drawer，里面放了一个自定义的组件来放菜单
代码如下

<uni-drawer ref="showLeft" mode="left">  
    <scroll-view class="scroll-menu" style="height: 100%;" scroll-y="true">  
        <image class="me_login_img" src="../../static/me/me_login.png" mode="aspectFit"></image>   
        <text class="me_split_line"></text> //分割线  
        <me class="me_list"></me>  //自定义的内容组件  
    </scroll-view>  
</uni-drawer>

想要的效果图如下

h5端倒是正常
在安卓端调试，始终无法让图片和文字在同一列显示。

2022-08-23 16:31 负责人:无分享

4 个回复

CODE_XU

使用 flex 布局

2***@qq.com (作者)

可以详细说一下吗，我之前也尝试过在我的自定义组件用flex，但是还是无效

2022-08-23 16:47

CODE_XU

<template>  
    <view class="flex-line">  
            <image src="../../static/logo.png"></image>  
            <text>text</text>  
    </view>  
</template>  

<style lang="scss">  
    .flex-line {  
        display: flex;  
        flex-direction: row;  
    }  
</style>

2***@qq.com (作者)

谢谢大神，非常感谢你的耐心解答

2022-08-23 17:02
2***@qq.com (作者)

回复 2***@qq.com: 大神，请问现在我在me.vue组件里面用你的方法定义了，布局问题已经解决。但是图片在安卓上的uni-drawer中不显示，H5端和安卓端测试的webview中是正常显示的的。

2022-08-23 17:19
CODE_XU

回复 2***@qq.com: 提供一个可以复现的 demo ，理论上讲 uni-drawer 跟这没关系

2022-08-23 17:31