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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
js玩一玩WSH吧
2007/02/23 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python的依赖管理的实现
2019/05/14 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
会计人员岗位职责
2015/02/03 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
HTTP中的Content-type详解
2022/01/18 HTML / CSS
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle