swiper上下滑动缓慢过渡

先修改css

.swiper-container{width: 100%;height: 100%;}
.swiper-container-scrollbar .swiper-slide{
    height: auto;
}
.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: linear;    /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

调整js

<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        autoplay : 1,     
        speed:1000,
        slidesPerView: 1,
        slidesPerGroup : 1,
        mousewheel: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
			 

    });
</script>

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用vue-awesome-swiper实现上下滚动的方法: 1.首先安装swiper和vue-awesome-swiper插件: ```shell npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save ``` 2.在需要使用的组件中引入swiper和vue-awesome-swiper: ```javascript import Vue from 'vue' import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' ``` 3.在组件中使用swiper和vue-awesome-swiper: ```html <template> <div class="swiper-container" ref="mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in list" :key="index">{{ item }}</div> </div> <div class="swiper-pagination" slot="pagination"></div> </div> </template> <script> export default { components: { swiper, swiperSlide }, data() { return { list: ['第一条公告', '第二条公告', '第三条公告', '第四条公告', '第五条公告'] } }, mounted() { this.$nextTick(() => { new this.$swiper(this.$refs.mySwiper, { direction: 'vertical', autoplay: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true } }) }) } } </script> <style> .swiper-container { height: 200px; } .swiper-slide { display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; } .swiper-pagination-bullet-active { background-color: #fff; } </style> ``` 4.在上面的代码中,我们使用了swiper的direction属性来设置滚动方向为垂直方向,同时使用了autoplay和loop属性来实现自动播放和循环播放。我们还使用了pagination属性来添加分页器,使用户可以手动切换公告。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AQMAX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值