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用图作提交按钮或超连接
Mar 26 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
js实现跟随鼠标移动的小球
Aug 26 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实现上传多文件示例代码
2017/02/20 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python自动化测试实例解析
2014/09/28 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python实现二维插值的三维显示
2018/12/17 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python实现统计代码行数的小工具
2019/09/19 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
一套.net面试题及答案
2016/11/02 面试题
院领导写的就业推荐信
2014/03/09 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL