vue竖向轮播评论语句

最新推荐文章于 2025-05-16 22:07:57 发布

document_write

最新推荐文章于 2025-05-16 22:07:57 发布

阅读量670

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/document_write/article/details/99226867

本文介绍了如何在Vue项目中利用vue-awesome-swiper组件创建一个竖向轮播展示评论的功能，详细讲解了安装和配置过程。

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

需要安装 “vue-awesome-swiper”

<template>
    <swiper :options="swiperOption"  ref="mySwiper">
      <!-- 这部分放你要渲染的那些内容 -->
      <swiper-slide >
        <div class="swiperCon">
          <div class="top">
            <img class="avatar" src="https://img.piaoniu.com/user/2012718/avatar/1532736243320.jpg/a38ac80673319ee37ad7d450fb1341a74dcfcefa.jpg" alt="">
            <div class="perName">
              <p class="name">丁丁评论</p>
              <p class="discuss">评论了<span class="comment">丁丁红馆演唱会</span></p>
            </div>
          </div>
          <div class="bottom">
            <span class="talk">丁丁太可爱啦，和我对视啦，啊啊啊啊啊啊啊</span>
          </div>
        </div>
      </swiper-slide>
    </swiper>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "swiper",
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween:10,
          loop:true,
          speed:2000,
          direction:"vertical",
          autoplay:{
            delay:1500
          },
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          }
        }
      }
    }
  }
</script>
<style scoped>
  .swiper-container{
    width:334px;
    height: 70px;
    padding:9px 16px 5px 16px;
  }
  .swiperCon{
    display: flex;
    flex-direction: column;
    height: 70px;
  }
  .avatar{
    width:33px;
    height: 33px;
    border-radius: 50%;
    margin-right: 13px;
  }
  .perName{
    display: flex;
    flex-direction:column;
  }
  .top{
    display: flex;
    align-items: center;
  }
  .name{
    font-size: 14px;
    font-weight: bold;
    color: #595959;
    font-family: "微软雅黑";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .discuss{
    font-size: 12px;
  }
  .comment{
    color: #4b8feb;
    padding-left: 5px;
  }
  .bottom{
    color: #999999;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>