【微信小程序】在swiper-item使用wx:for時出現的問題


代碼如下:

wxml:

<!--pages/mall/mall.wxml-->
<view class="contianer">
  <view class="swiper">
    <swiper display-multiple-items="{{swiper_pictures.length}}" indicator-dots indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#ffffff" autoplay current="0" interval="5000" duration="500" circular previous-margin="20rpx" next-margin="20rpx" snap-to-edge="{{true}}" easing-function="easeInOutCubic" >
      <swiper-item wx:for="{{swiper_pictures}}"  wx:for-item="item" item-id="{{item.id}}" skip-hidden-item-layout>
        <image src="{{item.url}}" mode="widthFix" lazy-load show-menu-by-longpress ></image>
      </swiper-item>
    </swiper>
  </view>
</view>

js:

swiper_pictures: [
      {id:"1",alt: "圖片1", url: "/static/images/1.png"}, 
      {id:"2",alt: "圖片2", url: "/static/images/2.jpg" }, 
      { id: "3", alt: "圖片3", url:"/static/images/3.jpg"},
      { id: "4", alt: "圖片4", url: "/static/images/4.jpg" },
      { id: "5", alt: "圖片5", url: "/static/images/5.jpg" },
      { id: "6", alt: "圖片6", url: "/static/images/6.jpg" },
      { id: "7", alt: "圖片7", url: "/static/images/7.jpg" },
      { id: "8", alt: "圖片8", url: "/static/images/8.jpeg" },
      { id: "9", alt: "圖片9", url: "/static/images/9.jpg" },
      { id: "10", alt: "圖片10", url: "/static/images/10.jpg" }
      ]

效果如下:

 

 

問題:為什么所有的圖片都擠到一塊去了?

解決辦法:display-multiple-items 這個屬性是表示在一個swiper-item中同時顯示的圖片數量,而不是swiper-item的數量。把這個屬性去掉就好了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM