Question

当我把它放在离子列表中时，我的幻灯片不再起作用了。我把它放在那里的原因是因为我使用了无限滚动，如果我在列表外面放一张幻灯片，它就不能正确滚动。有没有办法让幻灯片在离子列表中工作？

<ion-list no-lines style="width:100%;margin:0;padding:0;" [hidden]="artArray.length == 0" [virtualScroll]="artArray" approxItemHeight="40px">

<div >
    <ion-slides autoplay="3000" loop="true" speed="400" style="height:120px;" pager="true">
        <ion-slide>
            <img src="assets/p1.png" />
        </ion-slide>
        <ion-slide>
            <img src="assets/p2.png" />
        </ion-slide>
        <ion-slide>
            <img src="assets/p3.png" />
        </ion-slide>
    </ion-slides>
</div>

    <ion-item *virtualItem="let item;let i=index" no-padding style="border-bottom:solid #eeeeee 1px;height:120px;" (click)="pushArtdetailsPage($event, item)"
     [ngClass]="{'firstitem': i==0 }" >

        <div id="lstimg" style="width:120px;height:120px;padding-top:10px;padding-bottom:5px;background-color:#f8f8f8;">
            <img src="{{ item.art_pic1 }}" width="120px" height="100px" style="padding:0px 5px 0px 10px;">
            <!--<ion-img width="120px" height="100px" src="{{ item.art_pic1 }}" [cache]="true" style="padding:0px 5px 0px 10px;"></ion-img>-->
            <!--<virtual-ion-img width="100px" height="100px" [src]=" item.art_pic1"></virtual-ion-img>-->
        </div>
        <h6 ion-text color="dark" style="position:absolute;top:10px;left:130px;font-weight:bold;">{{ item.art_name }}</h6>
        <h6 ion-text style="position:absolute;left:130px;top:30px;font-weight:bold;font-size:0.9em;color:gray;" *ngIf="item.art_is_shop != 1">{{ item.art_seller }}</h6>
        <h6 ion-text color="primary" style="position:absolute;left:130px;top:30px;font-weight:bold;font-size:0.9em;" *ngIf="item.art_is_shop == 1">{{ item.art_seller }}</h6>
        <h6 ion-text color="mygray" style="position:absolute;left:130px;top:50px;font-size:0.9em;font-weight:bold;color:gray;"><span ion-text color="mygary">{{ item.art_price }}</span> fcfa</h6>
        <h6 *ngIf="item.art_old_price !=0" ion-text color="mygray" style="background-color: #fae6ee;padding: 2px 2px 2px 2px;font-size:0.7em;position:absolute;left:130px;top:75px;text-decoration:line-through;font-weight:bold;">{{ item.art_old_price }} fcfa</h6>
    </ion-item>

</ion-list>

Answer 1

只是一个想法，但您是否尝试将幻灯片div更改为item的{{1}}？

list

但不确定它会解决您原来的问题<ion-list> <ion-item> <ion-slides> <ion-slide> </ion-slide/> </ion-slides> </ion-item> <ion-item *virtualItem="let item;let i=index"> </ion-item> </ion-list>。

顺便说一下。你对it doesn't scroll properly的意思是什么？

不使用it doesn't scroll properly例如virtualScroll它是否正确滚动？

您是否尝试使用Chrome调试器解析页面的ngFor属性，以查看css属性是否会产生此副作用？

离子列表中的离子3离子滑动不能正常工作

1 个答案: