如何在swiper中顯示兩個(gè)item以及下一個(gè)item的部分內(nèi)容

我所實(shí)現(xiàn)的效果

我實(shí)現(xiàn)的代碼

<!--圖片輪播圖--><!--要展示兩個(gè)item 以及下一個(gè)item的部分內(nèi)容，circular需要設(shè)置為false，或者不設(shè)置，display-multiple-items設(shè)置為2，next-margin按照自己的需求設(shè)置--><swiper indicator-dots = false vertical = false autoplay = falsedisplay-multiple-items='2' next-margin='150rpx' class="image_group"><block wx:for="{{item.images}}" wx:for-item="photo" wx:key="*this"><swiper-item><view class='swiper_item'><image src="{{photo}}" mode="aspectFill"></image></view></swiper-item></block></swiper> /*輪播圖*/ .image_group{position: relative;margin-left: 20rpx;margin-top: 20rpx;height: 260rpx; }.swiper_item {width: 250rpx;height: 250rpx;overflow: hidden;border-radius: 10rpx; }.swiper_item image{width: 250rpx;height: 250rpx; }

注意細(xì)節(jié)

要展示兩個(gè)item 以及下一個(gè)item的部分內(nèi)容，circular需要設(shè)置為false，或者不設(shè)置，否則會(huì)出現(xiàn)滑動(dòng)時(shí)部分item不顯示問(wèn)題，display-multiple-items設(shè)置為2，next-margin按照自己的需求設(shè)置，它的數(shù)值決定了下一個(gè)item所展示部分的寬度

展示3.5、4.5、5.5個(gè)item實(shí)現(xiàn)同理

以上內(nèi)容均為個(gè)人通過(guò)測(cè)試所得的效果，如果不妥，歡迎評(píng)論糾錯(cuò)

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。