vue中选项卡点击切换且能滑动切换功能的实现代码


Posted in Javascript onNovember 25, 2018

具体代码如下所述:

<div>
  <div class="navlist">
   <ul>
    <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}</i>
    </li>
   </ul>
  </div>
  <div class="swiper-container swiper_con">
   <div class="swiper-wrapper">
    <!-- 第一个swiper -->
    <div class="swiper-slide" ref="viewBox">1111
    </div>
    <!-- 第二个swiper -->
    <div class="swiper-slide">2222
    </div>
   </div>
  </div>
 </div>
<script>
 export default {
  name: "swiper",
  data() {
   return {
    navList:[
     {name:'热门答疑'},
     {name:'北清状元'}
    ],
    nowIndex:0,
   }
  },
  components:{
  },
  mounted() {
   var that=this
   that.mySwiper = new Swiper('.swiper-container',{
     initialSlide:0,
     autoplay:false,
     keyboardControl:true,
     autoHeight:true,
     observer:true,
     observeParents:true,
     onSlideChangeStart:function(){
      // console.log(that.mySwiper.activeIndex)
      that.nowIndex=that.mySwiper.activeIndex
     }
    });
   // this.getList();
  },
  methods: {
   tabClick(index){
    this.nowIndex = index
    this.mySwiper.slideTo(index,1000,false)
   },
  },
 created(id){
 
 }
}
</script>
<style>
.navlist{
 width:100%;
 height:40px;
 border-bottom:1px solid rgba(151,151,151,0.1);
 position:relative;
}
.navli{
 padding:10px 0px;
 text-align:center;
 float:left;
 margin:0 1.2rem;
}
.navli i{
 font-style: normal;
 font-size: 16px;
}
.activeT{
 color:#00ba6b;
 padding-bottom: .3rem;
 border-bottom: 2px solid #00ba6b;
}
.swiper_con{
 width:100%;
 margin-bottom:40px;
 position:relative;
} 
.choosegrand{
 position:absolute;
 top:-3;
 right:0;
}
.show{
 display:block;
}
.none{
 display:none;
}
</style>

总结

以上所述是小编给大家介绍的vue中选项卡点击切换且能滑动切换功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
react MPA 多页配置详解
Oct 18 Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
You might like
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
json的使用小结
2016/06/08 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
《雾凇》教学反思
2014/02/17 职场文书
测量工程专业求职信
2014/02/24 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
考试作弊检讨书
2014/10/21 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL