Question

我有一个旋转木马，它有效，但据我了解，她滚动屏幕截图，所以我不能像设计中那样positiozionirovat元素！

有 enter image description here 应该如此 enter image description here

<v-ons-carousel fullscreen
                        swipeable
                        auto-scroll
                        overscrollable
                        :index.sync="carouselIndex"
                        class="carousel_main"
        >
            <v-ons-carousel-item class="carousel_item" v-for="(item, key) in items"
                                 :key="key">
                <v-ons-row vertical-align="center"
                           style="text-align: center;"
                           class="carousel_row">
                    <v-ons-col style="align-self: flex-end;" width="50%">
                        <img :src="item.img" alt="">
                    </v-ons-col>
                    <v-ons-col width="100%">
                        {{ item.title }}
                        <br>
                        <span">
                          {{ item.text }}
                        </span>
                    </v-ons-col>
                </v-ons-row>
            </v-ons-carousel-item>
        </v-ons-carousel>



data() {
            return {
                carouselIndex: 0,
                imgPhone,
                imgHome,
                imgPayList,
                items: [
                    {
                        img: imgPhone,
                        title: 'Пополняйте счет на мобильном телефоне',
                        text: 'Пополняйте мобильный с минимальной комиссией',
                    },
                    {
                        img: imgHome,
                        title: 'Оплачивайте более 1000 услуг прямо с телефона',
                        text: 'Коммунальные платежи, интернет и ТВ, онлайн игры и многое другое',
                    },
                    {
                        img: imgPayList,
                        title: 'Создавайте шаблоны платежей',
                        text: 'Приложение автоматически будет оплачивать ваши услуги',
                    },
                ],

            };
        },

Answer 1

旋转木马没有提供显示邻居的方法，所以你必须自己做。你在哪里：

<table class="table table-hover table-striped table-bordered table-sm">
    <thead class="thead-light">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Employee ID</th>
            <th>Position Title</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.listEmployee)
        {
            <tr>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                <td>@item.EmployeeId</td>
                <td>@item.PositionTitle</td>
                <td>
                    <button id="btnSelect" class="btn btn-sm">Select</button>
                    <input id="txtCaseNo" type="text" style="display:none;" />
                </td>
            </tr>
        }
    </tbody>
</table>

你需要像

这样的东西

<v-ons-col style="align-self: flex-end;" width="50%">
   <img :src="item.img" alt="">
</v-ons-col>

您可能需要将三个图像包装在一个div中以生成一行，并将样式<v-ons-col style="align-self: flex-end;" width="50%"> <img v-if="key > 0" class="neighbor" :src="items[key-1].img"> <img :src="item.img" alt=""> <img v-if="key < items.length - 1" class="neighbor" :src="items[key + 1].img"> </v-ons-col>与不透明度和比例降低。

如何在轮播中

1 个答案: