Vue中swiper的指向性跳转~轮播图与标题的互动
vue中swiper的使用在vue中加载swiper模块//下载swiper:npm install swiper --save-devhtml中的布局<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">...
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)