Question

我当前正在使用Swiper：

滑动版本：4.5.0。
平台/目标和浏览器版本：Web Chrome。
正确纠正行为，如果恰好有12个项目：https://codepen.io/chunallen/pen/gOYGOpo
如果有12个以上的项目，则行为不正确：https://codepen.io/chunallen/pen/QWLqWbJ

当前行为

我有一个多行纸牌网格，每页显示12张纸牌。我要迭代到18个项目，有时还是动态的，但每页至少应渲染12个项目

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.myapplication, PID: 491
    java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String com.example.myapplication.Lokasi.LocationDB.getImage()' on a null object reference
        at com.example.myapplication.CoffeeShopDetail$1.onDataChange(CoffeeShopDetail.java:87)
        at com.google.firebase.database.core.ValueEventRegistration.fireEvent(com.google.firebase:firebase-database@@18.0.1:75)
        at com.google.firebase.database.core.view.DataEvent.fire(com.google.firebase:firebase-database@@18.0.1:63)
        at com.google.firebase.database.core.view.EventRaiser$1.run(com.google.firebase:firebase-database@@18.0.1:55)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7319)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:934)

预期行为

如果我有18个项目，则应按水平顺序显示，每页显示12个像这样：

options = {
      slidesPerView: 3,
      slidesPerColumn: 4,
      slidesPerGroup:3,
      spaceBetween: 20,
      slidesPerColumnFill: 'row',
      direction: 'horizontal',
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
     }
}

实际行为

如果我放出12个以上的东西（例如18个或更多），则指示1-12转到第二页。

for 1st page
1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
10| 11| 12

for 2nd page
13 | 14 | 15
16 | 17 | 18

请检查此内容以供参考https://codepen.io/chunallen/pen/QWLqWbJ

Answer 1

我通过在Github https://github.com/nolimits4web/swiper/issues/3193上回答我自己提出的问题来解决了该问题

在多行上滑动错误的方向，方向：水平，滑动slidesPerColumnFill：“行”，

当前行为

预期行为

实际行为

1 个答案: