Question

我已经制作了一个代码，将图像和文本一起附加到离子视图的标题栏上。这是代码段：

<ion-view align-title="left">
<h1 style="margin-left:100px" class="title">
<img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" />
</h1>
<h1 class="title">Titled Text</h1>
    <ion-content class="padding">
        <div class="list list-inset">
            <label style="border: 3px solid red; border-radius:5px;" class="item item-input">
                <input focus-on="focusMe" type="text" ng-model="register.username" placeholder="Choose username">
            </label>
            <label style="margin-top: 10px; border: 3px solid red; border-radius:5px;" class="item item-input">
                <input type="password" placeholder="Choose password" ng-model="register.password">
            </label>
        </div>
        <a style="margin-top: 100px; border: 3px solid red; border-radius:5px; background-color: #ff6000 class="button button-block button-positive">Next</a>
    </ion-content>
</ion-view>

这是我所做的。

Plunker

请问如何在离子视图的标题栏中显示图像和文字？

Answer 1

我为你制作了一个小型演示，

Plunker

<强> HTML

<ion-view title="Home" hide-nav-bar="true">
    <div class="bar bar-header bar-light">
         <h4>myApp</h4>
        <div style="width:100%">
            <img style="height: 16px;
        margin-top: 9px;" src="https://placehold.it/85x25" />
        </div>
    </div>
    <ion-content padding="true">
        <h1 style="text-align: center;">Welcome user</h1>
    </ion-content>
</ion-view>

Answer 2

这是我的问题/挑战的解决方案。因为我发现做这样的事情很困难

ConfigureAwait(false)

要将图片和文字添加到栏中，我最终会这样做：

Task.Run

不知道你会怎么想但它有效。当它在标题处放置一个图像时，我也在标题栏上有一个文本。只是一个简单的逻辑

Ionic AngularJS：将图像和文本附加到Ionic View Not Showing的标题

2 个答案: