Vue滑动翻页组件swiper的实现---第二版

latency_cheng

于 2018-10-08 15:45:38 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue 文章标签： JavaScriptslider滑动翻页swiper JavaScript slider 滑动翻页 swiper

本文链接：https://blog.youkuaiyun.com/latency_cheng/article/details/82968605

本文介绍了Vue中滑动翻页组件Swiper的优化，包括将组件宽度改为自定义，滑动时利用transform属性添加动态效果，并调整滑动阙值为页面宽度的1/3。尽管一些遗留问题仍待解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

优化的点：

1、改变组件结构，滑动组件的宽度由100vw改为自定义

SwiperPage.vue

<template>
  <div class="ths_swiper-page">
    <t-swiper-wrap>
      <t-swiper-item>
        <div class="swiper" style="background: #ccc"><p>swiper1</p><p>swiper1</p></div>
      </t-swiper-item>
      <t-swiper-item>
        <div class="swiper" style="background: #eee"><p>swiper2</p></div>
      </t-swiper-item>
      <t-swiper-item>
        <div class="swiper" style="background: #aaa"><p>swiper3</p></div>
      </t-swiper-item>
    </t-swiper-wrap>
  </div>
</template>

<style lang='scss'>
.ths_swiper-page {
  .swiper{
    display: inline-block;
    width: 100vw; /*自定义宽度*/
  }
}
</style>

最低0.47元/天解锁文章