javascript 当用户单击离子项中的任何项时打开新页面

qf9go6mv  于 2023-01-04  发布在  Java
关注(0)|答案(3)|浏览(78)

这是codepen
1)我想打开新的详细信息页面,当用户点击项目,并希望显示在新打开的背部点击项目的详细信息。
2)详细信息页面上会有"OK"按钮,如果用户点击该按钮,则会返回列表页面。
3)我怎样才能在列表项的右侧显示有标记的圆圈图标。
我怎么能做到这一点?我花了2个小时,但我还没有找到任何工作的解决方案。
请帮帮我。我是离子和角的新手。

lc8prwob

lc8prwob1#

在你的css中添加这样的代码:

ion-list div ion-item i {
  float: right;
  position: relative;
}

您可能需要添加一行,例如:

top: -20px;

来调整位置。

ubof19bj

ubof19bj2#

你应该读一下states,然后为你的列表的每个元素创建一个,为列表本身创建一个。之后你需要做的就是调用$state.go('nameOfState');。不确定是否有一种方法可以只使用ionic本身来完成它...

hm2xizp9

hm2xizp93#

这里有一个变通办法;问题1)向链接到处理事件的方法的每个离子项添加onclick事件。回调将处理到详细信息页面的路由,同时将列表页面URL作为属性或路由查询参数附加
问题3)Ionic 5 +已经具备了这个特性,你可以简单地使用slot属性来定位离子项中的项,下面是一个涵盖了以上所有内容的示例代码

<h4> {{ product.name }} ({{ product.sku }})</h4>

          <ion-row>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small>Selling Price: {{ product.selling_price }}</small>
            </ion-col>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small> Cost Price: {{ product.cost_price }} </small>

            </ion-col>

          </ion-row>
        </ion-label>
        <ion-buttons>
          <ion-button fill="clear" slot="end" @click="editProduct(product._id)">
            <ion-icon :icon="createOutline" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-button fill="clear" slot="end" @click="deleteProduct(product._id)">
            <ion-icon :icon="trashOutline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-buttons>

      </ion-item>

相关问题