1***@qq.com
1***@qq.com
  • 发布:2023-11-07 12:04
  • 更新:2023-11-07 12:04
  • 阅读:144

uni-nav-bar 插入左侧文字为啥没有展示出来

分类:uni-app
<template>  
    <view class="top" ref="top">  
        <uni-nav-bar class="top-bar" color="#333333" background-color="transparent"   
        @clickLeft="showCity" status-bar="true" leftWidth="80px" right-width="100px" :border-bottom="false" :border="false" :shadow="false">  
            <block slot="left">  
                <view class="city">  
                    <view><text style="font-size: 14px">北京</text></view>  
                    <uni-icons type="arrowdown" color="#333333" size="16" />  
                </view>  
            </block>  
            <view class="input-view">  
                <uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />  
                <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">  
            </view>  
        </uni-nav-bar>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                href: 'https://uniapp.dcloud.io/component/README?id=uniui'  
            }  
        },  
        methods: {  
            async loginSub() {  
                const response = this.$api.user.login()  
                console.log('数据结果', response)  
            }  
        }  
    }  
</script>  

<style>  
    .container {  
        padding: 20px;  
        font-size: 14px;  
        line-height: 24px;  
    }  

    .top {  
        width: 750rpx;  
        height: 458rpx;  
        background: linear-gradient(90deg, #FF8E7A 1%, #FE5643 100%);  
        box-shadow: 24px 52px 100px 0px rgba(90, 108, 234),  
    }  

    .city {  
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        margin-left: 4px;  
        margin-top: -4px;  
    }  

    .input-view {  
        display: flex;  
        flex-direction: row;  
        flex: 1;  
        background-color: #f8f8f8;  
        height: 30px;  
        border-radius: 15px;  
        padding: 0 15px;  
        flex-wrap: nowrap;  
        margin-left: 7px 0;  
        margin-top: 4px;  
        line-height: 30px;  
    }  

    .nav-bar-input {  
        height: 30px;  
        line-height: 30px;  
        width: 100px;  
        padding: 0 5px;  
        font-size: 14px;  
        background-color: #f8f8f8;  
    }  

</style>
2023-11-07 12:04 负责人:无 分享
已邀请:

要回复问题请先登录注册