vue实现tab左右滑动效果

最新推荐文章于 2024-07-23 21:45:00 发布

想要吐泡泡的鱼

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量1.3k

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_46190955/article/details/118420278

版权

废话不多说，直接上代码，简单易懂哈，纯左右滑动效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
  .father{
	width:100%;
	overflow:hidden;
  }
  .sun{
    display:flex;
	transition:all 1s;
  }
  .item{
    border:1px solid orange;
  }
</style>
</head>
<body>
<div id="app">
  <button @click="goForLeft">向左</button><button @click="goForRight">向右</button>
  <div class="father">
	<div class="sun" ref="sun">
      <div v-for="(item,index) in iteArr" class="item" :ref="'item'+index">{{item.name}}</div>
	</div>
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
	current:0,
	iteArr:[
	  {name:'tab1111'},{name:'tab2222'},{name:'tab3333'},{name:'tab4444'},{name:'tab5555'},{name:'tab6666'}
	]
  },
  methods:{
	goForLeft(){
	  if(this.current==this.iteArr.length-1){
	    return
	  }
	  this.current+=1
	  const currentItem='item'+this.current
	  this.$refs.sun.style.transform = `translateX(-${this.$refs[currentItem][0].offsetLeft}px)`
	},
	goForRight(){
	  if(this.current==0){
		return
	  }
	  this.current-=1
	  const currentItem='item'+this.current
	  this.$refs.sun.style.transform = `translateX(-${this.$refs[currentItem][0].offsetLeft}px)`		
	}	
  },
  mounted(){
    console.log('---测试ref是否生效',this.$refs.item1[0].offsetLeft)
  }
})
</script>
</body>

</html>

想要吐泡泡的鱼

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue实现tab左右滑动效果

废话不多说，直接上代码，简单易懂哈，纯左右滑动效果<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue/dist/vue.js"></script><style> .father{ w
复制链接

扫一扫