Vue中swiper的指向性跳转~轮播图与标题的互动

最新推荐文章于 2024-04-26 10:27:19 发布

置顶 oKven_

最新推荐文章于 2024-04-26 10:27:19 发布

阅读量2.8k

点赞数 4

分类专栏： vue swiper

本文链接：https://blog.csdn.net/qq_40413396/article/details/89518811

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

swiper

1 篇文章 0 订阅

订阅专栏

vue中swiper的使用

在vue中加载swiper模块

//下载swiper：
npm install swiper --save-dev

html中的布局

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

在需要使用swiper的组件里引入swiper

import Swiper from 'swiper';
export default {
  name: 'video',
  data () {
    return {
      msg: 'video',
      swiper:''
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })
  }
}

在main.js里引入css

import Vue from 'vue'
import 'swiper/dist/css/swiper.css';

到这儿，swiper最基本的使用已经满足了，但是在实际开发中还需要更灵活的运用
** 比如说：手指切换轮播，使顶部导航对应的标题也发生变化，这需要我们监听swiper的切换 **

swiper的切换监听

 mounted () {
    let _this = this;
    this.swiper = new Swiper ('.swiper-container', {
        loop: false,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        // swiper切换时打印切换到当前轮播的下标  根据此下标找到对应标题
        on: {
          slideChangeTransitionStart: function(){
            console.log(this.activeIndex)
            //this.activeIndex  这就是第N个
            for(let i=0;i<_this.navlist.length;i++){
              _this.navlist[i].status = false;
            }
            _this.navlist[this.activeIndex].status = true;
            console.log(_this.navlist)
          },
        }
    })
}

根据需求跳转到指定的swiper中的某个tab

methods:{
  tabto5(){
     this.swiper.slideTo(4, 1000, false);//切换到第一个slide，速度为1秒
  },
}

下面附上完整逻辑

<template>
  <div>
    <div class="pg-header">
      <div class="clearfix uuBox">
        <img class="upload fl" src="../assets/images/creatpage/upload.png"/>
        <div class="fl userinfo">
            <h2>
              XXXXXXX
              <img src="../assets/images/creatpage/ex.png"/>
            </h2>
            <p>
              <span>3500w 获赞</span>
              <span>9400 关注</span>
              <span>2855 粉丝</span>
            </p>
        </div>
      </div>
      <div class="tabnav">
        <ul class="clearfix">
          <li>
            <a @click="tabto1()">
            <span v-bind:class="{ tabSpan: navlist[0].status }" @click="change($event,0)">最新</span>
            </a>
          </li>
          <li>
            <a @click="tabto2()">
            <span v-bind:class="{ tabSpan: navlist[1].status }" @click="change($event,1)">古装</span>
            </a>
          </li>
          <li>
            <a @click="tabto3()">
            <span v-bind:class="{ tabSpan: navlist[2].status }" @click="change($event,2)">经典</span>
            </a>
          </li>
          <li>
            <a @click="tabto4()">
            <span v-bind:class="{ tabSpan: navlist[3].status }" @click="change($event,3)">舞蹈</span>
            </a>
          </li>
          <li>
            <a @click="tabto5()">
            <span v-bind:class="{ tabSpan: navlist[4].status }" @click="change($event,4)">其他</span>
            </a>
          </li>
        </ul>
      </div>
    </div>



    <div class="tablist">

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" data-hash="slide1">
            <ul class="tab0 clearfix">
              <li class="fl" v-for="(item, index) in videoList">
                <v-video :src="item.src" :image="item.image" ></v-video>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" data-hash="slide2">
            <ul class="tab0 clearfix">
              <li class="fl" v-for="(item, index) in videoList">
                <v-video :src="item.src" :image="item.image" ></v-video>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" data-hash="slide3">
            <ul class="tab0 clearfix">
              <li class="fl" v-for="(item, index) in videoList">
                <v-video :src="item.src" :image="item.image" ></v-video>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" data-hash="slide4">
            <ul class="tab0 clearfix">
              <li class="fl" v-for="(item, index) in videoList">
                <v-video :src="item.src" :image="item.image" ></v-video>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" data-hash="slide5">
            <ul class="tab0 clearfix">
              <li class="fl" v-for="(item, index) in videoList">
                <v-video :src="item.src" :image="item.image" ></v-video>
              </li>
            </ul>
          </div>
        </div>
      </div>



      <p class="loadtxt" v-if="loading">正在加载</p>
    </div>
     <!--<v-footer></v-footer>-->
  </div>

</template>
<script>
  import publicFooter from '@/components/publicFooter'
  import Video from "@/components/videoOrImg";
  import Swiper from 'swiper';
  export default {
    name:'creatpagecs',
    components:{
      'v-footer':publicFooter,
      "v-video": Video
    },
    data(){
      return{
        videoList: [
          {
            src: "https://valipl.cp31.ott.cibntv.net/6773D428CBB4671C712562C5E/03000801005CA1C3F8154A1003E880F50EDC41-5516-4244-A14B-33333110A1FA.mp4?ccode=0502&duration=126&expire=18000&psid=28142505912e6862ebca0bd87070d579&ups_client_netip=6e57738f&ups_ts=1556013099&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=Abc903d2aa2493eb96707268864d80542",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              "https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1555992109&di=c7e145b694e9c0ba39447bde62e55260&quality=100&size=f320_424&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D1314252254%2C1560457688%26fm%3D58%26s%3D3540D3155F4168CE6AC4D0F503009031"
          },
          {
            src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
            image:
              require('../assets/images/creatpage/img1.png'),
          }
        ],
        loading:false,
        navlist:[
          {
            status:true,
          },
          {
            status:false
          },
          {
            status:false
          },
          {
            status:false
          },
          {
            status:false
          }
        ],
        swiper:''
      }
    },
    methods:{
      change:function (event,num) {
        console.log(event);
        console.log(num);
        console.log(this.navlist[num].status)
        let _this = this;
        for(var i=0;i<this.navlist.length;i++){
          _this.navlist[i].status = false;
        }
        _this.navlist[num].status = true;

      },
      tabto1(){
        this.swiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
      },
      tabto2(){
        this.swiper.slideTo(1, 1000, false);//切换到第一个slide，速度为1秒
      },
      tabto3(){
        this.swiper.slideTo(2, 1000, false);//切换到第一个slide，速度为1秒
      },
      tabto4(){
        this.swiper.slideTo(3, 1000, false);//切换到第一个slide，速度为1秒
      },
      tabto5(){
        this.swiper.slideTo(4, 1000, false);//切换到第一个slide，速度为1秒
      },
      created() {
        let _this = this;

          //变量scrollTop是滚动条滚动时，距离顶部的距离
          var scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
          var windowHeight =
            document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
          var scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
          let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
          console.log(h)
          if (scrollTop + windowHeight == scrollHeight) {
            //写后台加载数据的函数
            // _this.onLoad();
            console.log(
              "距顶部" +
              scrollTop +
              "可视区高度" +
              windowHeight +
              "滚动条总高度" +
              scrollHeight
            );
            let indexs;
            for(let i=0;i<this.navlist.length;i++){
              if(this.navlist[i].status == true){
                indexs = i;
              }
            }
            this.loading = true;
            setTimeout(function () {
              _this.addImg(indexs);
            },500)
          }


      },
      addImg(num){

        let imgs = {
          src: "http://valipl.cp31.ott.cibntv.net/6774797c7bc4571c079f0660a/03000801005CAF0EC2ED38A131CB6877E299D7-0484-4859-BDCB-CE501D1E2CE2.mp4?ccode=0502&duration=126&expire=18000&psid=925900f3e5638fd7ae9e0ab569877db6&ups_client_netip=6e57738f&ups_ts=1556013634&ups_userid=&utid=iCn1FLt3CSQCARuar2xAxXGk&vid=XNDE0Nzk2ODE4MA%3D%3D&vkey=A253e3985e55f1b9ad6cfad343f671ae4",
          image:
            require('../assets/images/creatpage/img1.png'),
        };
        for(let i=0;i<6;i++){
          console.log(num)
            this.videoList.push(imgs)
        }
        this.loading = false;
      }

    },
    mounted () {
      window.addEventListener('scroll', this.created);
      let _this = this;
      this.swiper = new Swiper ('.swiper-container', {
        loop: false,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        on: {
          slideChangeTransitionStart: function(){
            console.log(this.activeIndex)
            for(let i=0;i<_this.navlist.length;i++){
              _this.navlist[i].status = false;
            }
            _this.navlist[this.activeIndex].status = true;
            console.log(_this.navlist)
          },
        }
      })
    },
  }
</script>
<style>
  /*3.312*/
  .pg-header{
    width: 10rem;
    height: 5.1690rem;
    background: url("../assets/images/creatpage/creatpage.jpg") no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    z-index: 99999999999999999999;
  }
  .uuBox{
    padding-bottom: .789rem;
  }
  .upload{
    width: 1.996rem;
    display: block;
    margin-left: .741rem;
    margin-top: 1.3687rem;
    margin-right: .9662rem;
  }
  .userinfo{
    margin-top: 1.3687rem;
    text-align: left;
  }
  .userinfo h2{
    font-size: .5475rem;
    line-height: .5475rem;
    color: #eee1d8;
    padding-top: .451rem;
    padding-bottom: .3864rem;

  }
  .userinfo h2 img{
    width: .322rem;
    margin-top: -8px;
    margin-left: .2013rem;
  }
  .userinfo  p{
    color: #eee1d8;
    font-size: .2575rem;
    line-height: .2575rem;
  }
  .userinfo  p span{
    margin-right: .4rem;
  }
  .tabnav ul li{
    float: left;
    width: 20%;
    color: #eee1d8;
    font-size: .402rem;
  }
  .tabnav ul li a{
    color: #eee1d8;
    text-decoration: none;
  }
  .tabnav ul li span{
    width: 1.095rem;
    display: block;
    margin: 0 auto;
    padding-bottom: .29rem;;
  }
  .tabSpan{
    color: #f3cf4a;
    border-bottom: 1px #f3cf4a solid;
  }
  .tablist{
    padding-top:5.1690rem;;
    background: #161822;
    min-height: 17.75rem;
  }
  .tablist ul{
    margin-left: 0.013rem;
  }
  .tablist ul li{
    width: 33.3333333333%;
  }
  .tablist ul li img{
    width: calc( 100% - 0.0322rem );
    height: 4.396135rem;
    display: block;
    margin-bottom: 0.0322rem;
  }
  .tablist ul li:nth-child(3n) .video{
    /*width: 100%;*/
    /*height: 4.396135rem;*/
    /*margin-bottom: 0.0322rem;*/
  }
  /*.tablist div{*/
    /*display: none;*/
  /*}*/
  .tablist .active{
    display: block;
  }
  .loadtxt{
    line-height: 30px;
    color: #ececec;
  }
</style>

oKven_

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue中swiper的指向性跳转~轮播图与标题的互动

vue中swiper的使用在vue中加载swiper模块//下载swiper：npm install swiper --save-devhtml中的布局<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"&gt...
复制链接

扫一扫