vue实现tab左右滑动效果_vue实现左右滑动过渡效果

作者：很楠不爱3 | 2024-04-16 20:05:06

踩

vue实现左右滑动过渡效果

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

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/436195