vue+swiper4+js实现滑动的筋斗云效果

原理简单，细心看还是能看懂的


<template><div class="collectsLists"><Shade></Shade><!-- <keep-alive> --><div class="collectsContents"><div class="collects-top"><div class="publicWrap"><!-- <span class="line"></span> --><span class="close"><i class="iconfont icon-close"></i></span><span class="closeChecked"><i class="iconfont icon-close"></i></span></div><nav><h4>收藏列表</h4><div id="listTab"><span class="cloud" id="cloud"></span><div id="nav" class="clearfix"><button class="listButton"><span>展位</span></button><button class="listButton"><span>活动</span></button><button class="listButton"><span>会议</span></button></div></div></nav></div><div class="collects-wrap"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide hotList-wrap botton-wrap"><ul><liclass="clearfix hotList"@click="browsesListDetail(key)"v-for="(browse,key) in browses":key="browse.id"><div class="browseImg"><img :src="browse.imgUrl" alt="logo" /></div><div class="browseTxt"><h2 class="browseTitle">{{browse.name}}</h2><p class="browseCeng"><span>{{browse.ceng}}</span><span>{{browse.hallId}}</span></p></div><div class="browseR"><div class="browseTag"><div@click.stop="collectedBotton(key)":class="['browseTagnoto', {'collected': browse.iscollect}]"><i class="iconfont icon-shoucang"></i></div><p class="browseTagtxt"><span class="colletTxt" v-if="browse.iscollect">取消收藏</span><span class="colletTxt" v-else>收藏</span></p></div><div class="browseGo" @click.stop="NavigationBrowse(browse.id)"><div class="browseGoImg"><i class="iconfont icon-quzheli"></i></div><p class="browseTagtxt"><span>去这里</span></p></div></div></li></ul></div><div class="swiper-slide hotList-wrap noun-wrap"><ul><liclass="clearfix hotList"@click="meetingListDetail(key)"v-for="(browse,key) in nouns":key="browse.id"><!-- <div class="browseImg"><img :src="browse.imgUrl" alt="logo" /></div>--><div class="browseTxt"><h2 class="browseTitle">{{browse.name}}</h2><p class="browseCeng"><span>{{browse.ceng}}</span><span>{{browse.hallId}}</span></p></div><div class="browseR"><div class="browseTag"><div@click.stop="collectedNoun(key)":class="['browseTagnoto', {'collected': browse.iscollect}]"><i class="iconfont icon-shoucang"></i></div><p class="browseTagtxt"><span class="colletTxt" v-if="browse.iscollect">取消收藏</span><span class="colletTxt" v-else>收藏</span></p></div><div class="browseGo" @click.stop="NavigationBrowse(browse.id)"><div class="browseGoImg"><i class="iconfont icon-quzheli"></i></div><p class="browseTagtxt"><span>去这里</span></p></div></div></li></ul></div><div class="swiper-slide hotList-wrap meeting—wrap"><ul><liclass="clearfix hotList"@click="meetingListDetail(key)"v-for="(browse,key) in nouns":key="browse.id"><!-- <div class="browseImg"><img :src="browse.imgUrl" alt="logo" /></div>--><div class="browseTxt"><h2 class="browseTitle">{{browse.name}}</h2><p class="browseCeng"><span>{{browse.ceng}}</span><span>{{browse.hallId}}</span></p></div><div class="browseR"><div class="browseTag"><div@click.stop="collectedMeeting(key)":class="['browseTagnoto', {'collected': browse.iscollect}]"><i class="iconfont icon-shoucang"></i></div><p class="browseTagtxt"><span class="colletTxt" v-if="browse.iscollect">取消收藏</span><span class="colletTxt" v-else>收藏</span></p></div><div class="browseGo" @click.stop="NavigationBrowse(browse.id)"><div class="browseGoImg"><i class="iconfont icon-quzheli"></i></div><p class="browseTagtxt"><span>去这里</span></p></div></div></li></ul></div></div></div><div class="collects-other"></div></div></div><div class="planningRoute"><div class="planBtn"><button class="planRoute" @click="planRoutes()">规划路线</button></div></div><!-- </keep-alive> --><!-- <div class="collectsTag"><div class="publicWrap"><span class="close"><img src="@/assets/images/close.png" alt /></span></div><div class="tagLists"><ul><li class="tagList"><p class="tagTitle">会议</p><p class="tagCont">《增城市碘佛那个汽车管理》</p><div class="tagContent clearfix"><div class="tagTime"><p class="tagTitle">将于</p><p><span>11：00</span><span>开始</span></p></div><div class="tagAddress"><p class="tagTitle">位于</p><p><span>A320</span></p></div></div><p class="tagButton"><button>前往</button></p></li></ul></div></div>--></div>
</template><script>
import Swiper from "swiper";
import "@/assets/js/touch.js";import touchMove from "@/assets/js/backmove.js";export default {data() {return {// ind: "",nouns: [{id: 1,name: "怎样给狗狗洗澡最健康",data: "2019/11/11",starttime: "11:00",endtime: "11:40",address: "A223",ceng: "2F",hallId: "E1-A202",iscollect: true,imgUrl: require("@/assets/images/hotlists/bom.png")},{id: 2,name: "养狗和养猫的相同和不同之处",data: "2019/11/11",starttime: "11:00",endtime: "11:40",address: "A2022",ceng: "1F",hallId: "E1-A223",iscollect: true,imgUrl: require("@/assets/images/hotlists/bom.png")},{id: 3,name: "如何改掉猫挑食的毛病",data: "2019/11/11",starttime: "11:00",endtime: "11:40",address: "A1220",ceng: "3F",hallId: "E1-A302",iscollect: true,imgUrl: require("@/assets/images/hotlists/bom.png")}],// planRoute: true,browses: [{id: 1,name: "BOM BOM",ceng: "2F",hallId: "E1-A2302",iscollect: true,checked: true,imgUrl: require("@/assets/images/hotlists/b30.jpg")},{id: 2,name: "MOBY'S PETSHOP",ceng: "12F",hallId: "E1-A1103",iscollect: true,checked: true,imgUrl: require("@/assets/images/hotlists/6.jpg")},{id: 3,name: "OHp",ceng: "3F",hallId: "E1-A3324",iscollect: true,checked: true,imgUrl: require("@/assets/images/hotlists/4.jpg")}// {//   id: 4,//   name: "RICIN",//   ceng: "3F",//   hallId: "E1-A324",//   iscollect: true,//   checked: true,//   imgUrl: require("@/assets/images/hotlists/g21.jpg")// },// {//   id: 5,//   name: "MaxiPro",//   ceng: "3F",//   hallId: "E1-A324",//   iscollect: true,//   checked: true,//   imgUrl: require("@/assets/images/hotlists/g27.jpg")// },// {//   id: 6,//   name: "STORZ",//   ceng: "3F",//   hallId: "E1-A324",//   iscollect: true,//   checked: true,//   imgUrl: require("@/assets/images/hotlists/g26.jpg")// }]};},methods: {NavigationBrowse(id) {this.$router.replace({ path: "/NavigationSetFromTo", query: { id: id } });},planRoutes() {this.$router.replace("/Collect/CollectNav");},collectedMeeting(key) {if (this.browses[key].iscollect) {// 取消收藏this.browses[key].iscollect = false;$(this).parent().find(".colletTxt").text("收藏");// $(".colletTxt").text("收藏");} else {this.browses[key].iscollect = true;// $(".colletTxt").text("取消收藏");$(this).parent().find(".colletTxt").text("取消收藏");}},collectedNoun(key) {// console.log(222);if (this.browses[key].iscollect) {// console.log(111);// 取消收藏this.browses[key].iscollect = false;// console.log( $(this).parents)// this.browses.splice(key, 1);// $(this).parents.find('.colletTxt')$(this).parent().find(".colletTxt").text("收藏");// $(".colletTxt").text("收藏");} else {this.browses[key].iscollect = true;// $(".colletTxt").text("取消收藏");$(this).parent().find(".colletTxt").text("取消收藏");}},collectedBotton(key) {if (this.browses[key].iscollect) {// 取消收藏this.browses[key].iscollect = false;// console.log( $(this).parents)// this.browses.splice(key, 1);// $(this).parents.find('.colletTxt')$(this).parent().find(".colletTxt").text("收藏");// $(".colletTxt").text("收藏");} else {this.browses[key].iscollect = true;// $(".colletTxt").text("取消收藏");$(this).parent().find(".colletTxt").text("取消收藏");}},browsesListDetail(id) {this.$router.replace("/BrowsesListDetail");},meetingListDetail(id) {this.$router.replace("/ScheduleListDetail");}},inject: ["reload"],// beforeDestroy() {//   console.log(ind);// },created() {},mounted() {var _this = this;window.isShowFromTo = true;window.localStorage.setItem("routersDet", this.$route.path);window.localStorage.setItem("routers", this.$route.path);var tabItem = $(".listButton");var mySwiper = new Swiper(".swiper-container", {// 高度自适应autoHeight: true,slidesPerView: "auto",// autoplay: true,on: {//swiper从当前slide开始过渡到另一个slide时执行slideChangeTransitionStart: function() {var n = this.activeIndex; //过渡后的slide索引// console.log(n);changeTab(n);$("#cloud").stop().animate({left: $("#nav .listButton")[n].offsetLeft},200);}}});//返回之前加载let indexC = this.$store.state.index;changeTab(indexC);mySwiper.slideTo(indexC);tabItem.removeClass("active").eq(indexC).addClass("active");//tab点击切换sildetabItem.click(function() {var ind = $(this).index();_this.$store.commit("getIndex", ind);// console.log(_this.$store.state.index);changeTab(ind);mySwiper.slideTo(ind);$("#cloud").stop().animate({left: $("#nav .listButton")[ind].offsetLeft},200);});//tab切换样式function changeTab(index) {tabItem.removeClass("active").eq(index).addClass("active");}// $(".listButton:first").addClass("active");var _this = this;$(".collects-top .close").on("tap", function() {_this.$router.replace("/");});$(".collects-top .closeChecked").on("tap", function() {_this.reload();});$(".collectsTag .close").on("tap", function() {$(".collectsTag").css({display: "none"});});touchMove(".collectsContents",".collects-top",".collects-wrap",".collects-other",false);// 筋斗云// 缓动动画var list = $("#nav").children;for (var i = 0; i < list.length; i++) {// list[i].on("tap", function() {//   clickHandle;// });// list[i].ontap = clickHandle;// list[i].onmouseover = mouseoverHandle;// list[i].onmouseout = mmouseoutHandle;}$("#nav .listButton").on("tap", function() {// console.log($("#nav .listButton").eq($(this).index()));console.log($(this)[0].offsetLeft);$("#cloud").stop().animate({left: $(this)[0].offsetLeft},200);});// var index = 0;// function clickHandle() {//   index = this.offsetLeft;// }// function mouseoverHandle() {//   animate($("#cloud"), this.offsetLeft);// }// function mmouseoutHandle() {//   animate($("#cloud"), index);// }// // 获取元素// var cloud = document.getElementById("cloud");// var nav = document.getElementById("listTab");// var lis = nav.children[1].children;// // var lis = nav.children.className == "listButton active";// // 记录点击时的位置// var current = 0;// for (var i = 0; i < lis.length; i++) {//   lis[i].onmouseover = function() {//     target = this.offsetLeft;//   };//   lis[i].onclick = function() {//     current = this.offsetLeft;//   };//   lis[i].onmouseout = function() {//     target = current;//   };// }// var leader = 0,//   target = 0;// console.log(leader);// console.log(target);// setInterval(function() {//   leader = leader + (target - leader) / 10;//   cloud.style.left = leader + "px";// }, 10);}
};
</script><style scoped>
.closeChecked i {font-size: 0.56rem;color: #dddddd;
}
.shade {display: block !important;
}
/* 生成 */
.checked {margin: 0.34rem;width: 0.4rem;height: 0.4rem;background: rgba(244, 244, 244, 1);opacity: 1;border-radius: 0.08rem;
}
.checked i {display: none;
}
.checkedActive {background: rgba(48, 182, 164, 1);
}
.checkedActive i {display: block;width: 0.4rem;height: 0.4rem;font-size: 0.38rem;color: #fff;
}
.planningRoute {padding-bottom: 0.32rem;z-index: 101;width: 7.5rem;height: 1.2rem;background: #fff;position: absolute;bottom: 0;left: 0;
}
.planningRoute button {border-radius: 0.12rem;border: none;outline: none;background: #30b6a4;width: 6.7rem;height: 0.8rem;display: block;margin: 0.2rem auto;font-size: 0.32rem;font-family: PingFang SC;font-weight: 500;line-height: 0.8rem;color: rgba(255, 255, 255, 1);opacity: 1;
}
.hotList {padding-top: 0.2rem;padding-bottom: 0.2rem;border-bottom: 0.02rem solid #eeeeee;
}
.hotList:first-child {border-top: 0.02rem solid #eeeeee;
}
.hotList-wrap {width: 7.5rem !important;margin: 0 auto;
}
.hotList-wrap ul {padding: 0 0.4rem;
}
.browseList {position: relative;padding: 0.24rem 0;border-bottom: 0.02rem solid #c8c8c8;margin: 0.2rem 0.4rem;
}
.browseImg {/* margin-left: 0.2rem; */border: 0.01rem solid #eee;float: left;width: 1.08rem;height: 1.08rem;border-radius: 0.2rem;overflow: hidden;
}
.browseImg img {display: block;width: 100%;
}.browseTxt {float: left;/* margin-left: 0.2rem; */
}
.botton-wrap .browseTxt {margin-left: 0.2rem;
}
.meeting—wrap .browseTxt,
.noun-wrap .browseTxt {/* display: -webkit-box; */width: 4.6rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.botton-wrap .browseTxt {/* display: block; */width: 3rem;/* overflow: hidden;text-overflow: ellipsis;white-space: nowrap; */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.browseTagtxt {/* padding-top: 0.1rem; */text-align: center;height: 0.28rem;font-size: 0.2rem;font-family: PingFang SC;font-weight: 400;line-height: 0.56rem;color: rgba(170, 170, 170, 1);opacity: 1;
}
.browseTitle {width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 0.36rem;font-family: PingFang SC;font-weight: 600;line-height: 0.64rem;color: rgba(51, 51, 51, 1);opacity: 1;
}
.browseCeng {font-size: 0.24rem;line-height: 0.44rem;font-family: PingFang SC;font-weight: 400;color: rgba(102, 102, 102, 1);opacity: 1;
}
.browseR {/* margin: 0.1rem auto; *//* width: 1.6rem; */display: flex;justify-content: space-between;float: right;
}
.browseGo,
.browseTag {width: 1rem;margin-right: 0.1rem;/* margin: 0 0.1rem; */
}
.browseGo {margin-right: 0;
}
/* float: left; */.browseGoImg,
.browseTagnoto {width: 0.5rem !important;height: 0.52rem !important;margin: 0.1rem auto 0;
}
.browseGoImg i,
.browseTagnoto i {color: #f0f0f0;font-size: 0.52rem;display: block;
}
.collected i {color: #2fb5a3;
}
.icon-quzheli:before {color: #2fb5a3;
}
.collects-wrap {background-color: #fff;width: 100%;height: auto;overflow-y: scroll;overflow-x: hidden;
}
/* tag */
.tagList {margin: 0.2rem auto;
}
.collectsTag {z-index: 20;background-color: rgba(60, 60, 60, 0.9);position: absolute;top: 0.25rem;left: 0.25rem;font-size: 0.4rem;width: 6.6rem;border-radius: 0.2rem;margin: 0 auto;color: #fff;padding: 0.2rem;display: none;
}
.tagTitle {font-size: 0.24rem;
}
.tagCont {text-align: center;
}
.tagTime,
.tagAddress {margin: 0.4rem auto;width: 3.3rem;float: left;
}
.tagButton button {font-size: 0.32rem;line-height: 0.6rem;display: block;width: 6rem;margin: 0 auto;border: none;outline: none;border-radius: 0.5rem;
}
/* ========= */
#listTab {display: block;width: 5.04rem;height: 0.8rem;background: rgba(238, 238, 238, 1);opacity: 1;border-radius: 0.2rem;margin: 0 auto 0.2rem;position: relative;
}
.cloud {border-radius: 0.16rem;color: rgba(187, 187, 187, 1);width: 1.5rem;height: 0.72rem;margin: 0.04rem;display: block;position: absolute;top: 0;left: 0;background-color: #fff;z-index: 1;
}
#nav {background: rgba(238, 238, 238, 1);border-radius: 0.2rem;overflow: hidden;font-size: 0.32rem;
}
#nav .active {background: rgba(255, 255, 255, 1);color: rgba(51, 51, 51, 1) !important;opacity: 1;
}.listButton {font-family: PingFang SC;font-weight: 400;line-height: 0.8rem;font-size: 0.32rem;border-radius: 0.16rem;color: rgba(187, 187, 187, 1) !important;width: 1.6rem;height: 0.72rem;margin: 0.04rem;display: block;float: left;border: none;outline: none;background-color: unset;position: relative;
}
.listButton span {font-weight: bold;text-align: center;line-height: 0.72rem;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 10;
}.listButton:focus {color: #333;background-color: transparent;
}
.primary-active {color: #333;
}
button:enabled:active {background-color: transparent;
}nav h4 {padding-top: 0.32rem;padding-bottom: 0.2rem;font-size: 0.36rem;font-family: PingFang SC;font-weight: 500;line-height: 0.56rem;color: rgba(51, 51, 51, 1);opacity: 1;text-align: center;
}.collectsContents {z-index: 100;width: 100%;border-radius: 0.2rem 0.2rem 0px 0px;box-shadow: 0px 0px 0.12rem rgba(0, 0, 0, 0.16);position: absolute;/* top: 0; */left: 0;background: #fff;opacity: 1;font-size: 0.4rem;
}
</style>

vue+swiper4+js实现滑动的筋斗云效果相关推荐

html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
vue+element-ui+js页面打印（打印elementui的table）
前端调用浏览器打印功能,实现纯前端vue+element-ui+js打印页面功能 1.效果展示 2.封装成公共函数 3.在.vue文件中引入并使用"printExcel"函数 1. ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
Vue/Nuxt.js仿Tinder|探探翻牌特效|vue仿探探卡片滑动
基于Vue.js|Nuxt.js实现探探卡片滑动切换效果陌陌|探探社交App中拖拽滑动翻牌子效果让人印象深刻,最近在开发Nuxt项目,需要实现类似这个效果,于是经过多次调试,最终实现了,现整理作些简 ...
Vue移动端左右滑动效果实现方法
1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...

vue+swiper4+js实现滑动的筋斗云效果

vue+swiper4+js实现滑动的筋斗云效果相关推荐

最新文章

热门文章