关于长列表swiper-item只显示3个如何优化?
发布于 5 年前 作者 wuchao 12584 次浏览 来自 官方Issues

<swiper @change=“changevideo”>

 

<block v-for='(item, key) in topSwipers' wx:key='key'>
 <swiper-item v-if="(key >= (currentkey - 1)) && (key <= (currentkey + 1))" :style="{position: 'relative', height: '100%'}" :item-id="item.playerid" :data-xid="key">
   <txv-video
     [@touchstart](/user/touchstart)="touchStart"
     [@touchend](/user/touchend)="touchEnd"
     width="100%"
     height="100%"
     :vslideGestureInFullscreen="false"
     object-fit="cover"
     id="txtvideo"
     style="margin-top: 10rem !important;width: 100%;height: 100%;"
     :loop="true"
     direction="0"
     :vid="item.vid"
     v-if="item.mode == 1 && item.playerid == ifplay && key == currentkey"
     :playerid="item.playerid"
     :controls="false"
     objectFit="contain"
     :autoplay="item.mode == 1 && item.playerid == ifplay"
     :isHiddenStop="false"
   >
   </txv-video>
   <txv-video
     [@touchstart](/user/touchstart)="touchStart"
     [@touchend](/user/touchend)="touchEnd"
     width="100%"
     height="100%"
     :vslideGestureInFullscreen="false"
     object-fit="cover"
     id="txtvideo"
     style="margin-top: 10rem !important;width: 100%;height: 100%;"
     :loop="true"
     direction="0"
     :vid="item.vid"
     v-if="(item.mode == 0 || item.mode == 2) && item.playerid == ifplay && key == currentkey"
     :playerid="item.playerid"
     :controls="false"
     :autoplay="(item.mode == 0 || item.mode == 2) && item.playerid == ifplay"
     :isHiddenStop="false"
   >
   </txv-video>
   <div class="lanmu" v-if="item.playerid == ifplay">
     <img class="avatar-img" :src="item.avatar" />
     <view [@click](/user/click)="like(item.playerid, item)" style="height: 150rpx; padding-top: 20rpx;">
       <img class="like-img" :src="liked ? '/static/images/like.png' : '/static/images/love.png'"/>
       <span class="praise-txt">{{item.praise}}</span>
     </view>

     <!--              <img class="send-img" src="../../../static/images/send.png" />-->
     <button class="share-btn" open-type="share" :data-rid="item.message"></button>
     <!--              <span class="praise-txt">{{item.share}}</span>-->
   </div>
   <div class="bottomview" v-if="item.playerid == ifplay">
     <span class="nicktxt">@{{item.nickname}}</span>
     <span class="messagetxt">#{{item.message}}#</span>
   </div>
 </swiper-item>
</block>

</swiper>

没加

v-if="(key >= (currentkey - 1)) && (key <= (currentkey + 1))"

这个条件之前是可以滑动的,加这个的原因就是想要优化一下长列表swiper里面的item,让他每次只显示当前滑动的那一个和上下两个,目前问题是,加了这个条件之后,currentkey对应不上,只有0,1,2了,请问一下这个是什么问题,我应该如何优化这个组件呢?

3 回复

请问你解决了吗?我也遇到这个问题了

高度用vh例如:height:100vh

回到顶部