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 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
获取layer.open弹出层的返回值方法
Aug 20 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python3基础之函数用法
2014/08/13 Python
Python数据结构之Array用法实例
2014/10/09 Python
Python isinstance函数介绍
2015/04/14 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Django分页功能的实现代码详解
2019/07/29 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python 带时区的日期格式化操作
2020/10/23 Python
如何利用Python写个坦克大战
2020/11/18 Python
会计自我鉴定
2013/11/02 职场文书
大学社团活动总结
2014/04/26 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers