search

airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

swiper问题 swiper-item #2381

Open OneObject opened 6 years ago

OneObject commented 6 years ago 
<swiper loop v-model="pptIndex" :aspect-ratio="90/160" :show-dots="false" @on-index-change="onIndexChange">
          <swiper-item class="swiper-demo-img" v-for="(item, index) in imgObjectList" :key="item.id">
            <img :src="IMAGE_PATH + item.path">
            <div class="s-index">{{index+1}} / {{imgObjectList.length}}</div>
          </swiper-item>
        </swiper>

当我动态的为imgObjectList中的最后添加一个新的对象时，swiper的顺序变化了。imgObjectList 元素的index 和 滑动元素的index不相同了。刷新页面后正常。能否提供一个重置swiper组件的方法

OneObject commented 6 years ago

正常的初始化，index正常 image 为图片列表新增一个对象，就出现的index异常 image

wg5945 commented 6 years ago

有个rerender方法，请前往源码查看

airyland commented 6 years ago

swiper-item 创建时会 rerender 一次。没理解 index 不对应什么意思，loop 模式下最后一个会被移动到前面。

https://github.com/airyland/vux/blob/54199767513697079ff45ca5f5c9170ce36fffcf/src/components/swiper/swiper-item.vue#L8-L10

OneObject commented 6 years ago

列表变化之后，最后一个移动到最前面，导致了顺序出现了问题。

  1. 之前的文件数为14，loop模式下，最后一个移动到最前面，所以最前面的一个是 14 / 14
  2. 列表新增一个之后，loop模式下，最后一个移动到最前面，所以最前面的一个是 15 / 15，但是之前的 “14 / 14” 变成了 “14 / 15”，此时的顺序变成了 "15 / 15"，"14 / 15"，"1 / 15"，"2 / 15" 正常的排序下，应该是 “15 / 15”, "1 / 15", "2 / 15", "3 / 15" image