1/26 用vue.js简单实现轮播图

花了两天点时间，入门vue.js，学习相关概念，

（花了三块软妹币买了一个某dn的教程，入门了vue.js）

在今天终于把这个轮播给撸出来了，人都傻了

首先整理一下关于vue.js的入门要点，就是我自己觉得的简单结构（给自己写的，大佬高抬贵手）

 1 <script>
 2     var xxx = new Vue({
 3         // 首先就是挂载的地方，就是你要针对的某个id,或者class
 4         el:"#xxx", 
 5         // 数据仓库，用来放这个html（现阶段是html）里面你要用的数据
 6         // 为什么不直接data:{}呢，这个是因为那个相当于死的，如果有组件的，你这就没得副本，就老火了
 7         data(){
 8             return{
 9                 text1: 1,
10                 text2: [{xxx:1},{xxx:2}],
11                 ...
12             }
13         }
14         // methods 我们要用的方法
15         methods:{
16             function1(val){},
17             function2(val){},
18             ...
19         },
20         // 还有watch , created 一些奇奇怪怪的东西
21         
22     })
23 </script>

View Code

然后是思路，以前我做轮播图的时候，就是靠原生的js来硬尻，我人傻掉，而且当初只是仿照别的网站上的轮播图来写，根本没有

想到，对于后端这么用，有几个泡泡（按钮）或者是图片，就把弄好的第一个盒子直接ctrl+c ctrl+v ,每一个还要重新弄数据，真的是

麻烦到极点，这也是我为什么想要学vue.js的原因，想要自己生成html，之前学过jsp，有<c:foreach> 但是对于现在前后端分离的

情况下，哪个来学jsp，除非是毕业论文的需要与后端的东西加一起了方便比如jsp+SSM+MySQL

好了，话说回来，思路其实有两点

1.首先是这个图片我要怎么来放

我是这样想的，我们先弄一个大盒子pics，里面有一个很多个小盒子pic，这个[ pic ]是由vue.js里面的v-for生成的，通过 子绝父相 的定位，

让这些图片重起来，入下图

然后是html部分，通过v-for实现从 data里面的 pic_src数组里面造多少个[ pic ]

2.其次是图片怎么动

我个人认为，问题的处理方式越傻白甜越好，我的脑子不太适合复杂问题，但就是不知道这样处理会不会有一些问题

首先，我们得理清楚这个MVVM这个东西，我是刚入门的小白，但是我觉得这个MVVM很重要，vue.js的特性的嘛

我记得不是很清楚了，我那某dn的课链接挂掉了

主要是MVVM（Model-View-ViewModel）如果熟悉SpringMVC的朋友，应该对ModelAndView这个东西不会陌生，我当初可是弄吐了的

我的个人理解就是

Model 就是传给页面的数据

View 就是展现的视图，是基于Model来展现的

由于一些操作比如input，你可以写一些数据，让前端暂时保留并提交

所以有了这个图

这个时候我记得vue.js就是对这个图改一下，vue.js作为ViewModel来当上了中间人

我的理解就是，有了这个中间人，对model的修改可以直接显示在视图上，而不是过去的一来一回

具体可以参考vue.js的v-model

我又扯了这么多

其实，就是为了给自己再深化一下，MVVM的东西，话回来，说了这么多，其实最重要的东西，我自己给自己总结一下

其实就是 Vue里面 data里的变量，可以直接在view的某个地方改变

这个东西是有好处的，就按照这个轮播来说（仔细想了想好像联系不是很紧密，嘶，管他的），这个图片怎么动，其实我们设计一个

index变量就好了，

0 表示图片1

1 表示图片2

2 表示图片3

...

我们对图片的操作，其实归根结底就是对图片的象征 index 的操作

这个时候，我们只需要加上一个watch侦听‘index' 的改变，然后通过handler function对 [ pic ] 的操作就可以实现了（当初我也这么以为，但是会出现小Bug ）

出现下面bug的前提是我加了对watch里面，加了immediate：true，去掉以后就没了下面的bug，但是这个bug让我明白了,

可能是我的index没有发生改变，然后报错，去掉了immediate后，没有报错，但是还是一样页面显示不对，是这个样子的

也就是说，第一张图片pic_src[0]的这张图片是没有的，我怀疑可能是index没有改变，所以变不出来，但是加了immediate又还是哪个报错，根本没意义呀

于是

曲线救命

不是有created的吗

开头data里面写一个奇怪的index,随便怎么都行

然后created里面加这个

于是终于出来了（详细百度 vue生命周期），接着就是轮播的东西了，其实轮播来说还比较简单，就是对index操作，有一个setInterval一直都存在的计时器，不和setTimeout一样

里面对index操作，具体不放图片了，放一下效果图

代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <link rel="stylesheet" type="text/css" href="./css/pic.css"/>
 6         <title></title>
 7         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 8     </head>
 9     <body>
10     
11     <div id="pic_container">
12         <!-- 这个就是展示图片 -->
13         <!-- <img id="pic" :src="pic_src[index]" ref="pic">  这个样子的，只改变img的src不好过渡 -->
14         <div id="pics" >
15         <img id="pic"  v-for="(item,i) in pic_src" @mouseover="mouseOver()" @mouseout="mouseOut()" :src="item" ref="pic">
16         </div>
17         
18         <!-- 这个是下面的点，用v-for生成的点，用pic_src的大小确定的点，并且要知道这个点的index -->
19         <div id="dots" @mouseover="mouseOver()" @mouseout="mouseOut()">
20             <div v-for="(count,i) in pic_src.length" @click="index = i"  :class="i === index ? 'focus' : '' "></div>
21         </div>
22         
23         <div class="arrow_left" @click="onLeft" @mouseover="mouseOver()" @mouseout="mouseOut()"><div></div></div>
24         <div class="arrow_right" @click="onRight" @mouseover="mouseOver()" @mouseout="mouseOut()"><div></div></div>
25     </div>
26     
27     </body>
28     
29     
30     <script>
31         var pic = new Vue({
32             el:"#pic_container",
33             data(){
34                 return{
35                     timer:null,
36                     index: 1,  // 作为指示的数值，其最大数值和pic_src.length，即为数组的大小挂钩（因为我想之后的后端传数据可能是json字符串，经过处理到pic_src这里，是个对象数组
37                     pic_src:[
38                         "./img/mandalorain.jpg",
39                         "./img/wallhaven-5we787.jpg",
40                         "./img/wallhaven-oxkjgm.jpg",
41                         "./img/IMG_3964.png"
42                     ],
43                 }
44             },
45             created(){
46                 this.index = 0,
47                 console.log(this.index),
48                 this.mouseOut()
49             },
50             
51             methods:{
52                 mouseOut(){
53                     let that = this;
54                     this.timer = setInterval( function(){
55                         that.index = (that.index + 1) % that.pic_src.length,
56                         console.log(that.index)
57                     },3000)
58                 },
59                 mouseOver(){
60                     if (this.timer) clearInterval(this.timer);
61                 },
62                 // 左箭头
63                 onLeft(){
64                     // 左箭头其实就是减少1，我们通过 判断是否大于零，大于零 就是index - 1 ，小于零就用 图片数组的长度减去
65                     // index - 1的绝对值 再进行取余 得到最终的index 
66                     this.index =( this.index - 1) >= 0 ? (this.index - 1) % this.pic_src.length : this.pic_src.length -  
67                     Math.abs((this.index - 1)) % this.pic_src.length,
68                     console.log(this.index)
69                 },
70                 onRight(){
71                     this.index = (this.index + 1) % this.pic_src.length,
72                     console.log(this.index)
73                 },
74                 
75                 trans(){
76                     // this.$refs.pic[this.index].style.opacity =  '1';
77                     for(let i = 0; i < this.pic_src.length; i++){
78                      this.$refs.pic[i].style.opacity =  (i === this.index ? '1' : '0')
79                      }
80                 }
81             },
82             
83             watch:{
84                 'index':{
85                     // immediate:true,
86                     handler:function(newValue,oldValue){
87                         // console.log(''+newValue+' '+oldValue+' '+this.index)
88                         this.trans()
89                     }
90                 }
91             },
92             
93             beforeDestroy() {
94                 clearInterval(this.timer);   
95                 this.timer = null;
96             }
97         })
98     </script>
99 </html>

html+script

  1 body{
  2     background-color: lightpink;
  3 }
  4 
  5 #pic_container {
  6     margin: 20px auto;
  7     width: 600px;
  8     text-align: center;
  9     /* overflow: hidden; */
 10     position: relative;
 11 }
 12 
 13 #pic{
 14     width: 600px;
 15     height: 340px;
 16     display: block;
 17     box-shadow: 1.5px -1px 3px rgba(0,0,0,0.5);
 18     position: absolute;
 19     opacity: 0;
 20     transition: all 0.5s;
 21 }
 22 
 23 #pics{
 24     width: 600px;
 25     height: 340px; */
 26     overflow: hidden;
 27     position: relative;
 28 }
 29 
 30 
 31 #dots >div {
 32     margin: 12px 2px 12px 2px  ;
 33     width: 15px;
 34     height: 9px;
 35     border-radius: 2.3px;
 36     transition: background-color 0.2s;
 37     background-color: hsla(202,60%,100%,0.3);
 38     cursor: pointer;
 39     display: inline-block;
 40 }
 41 #dots {
 42      margin:0 auto;
 43      bottom: 10px;
 44      right: auto;
 45      left: auto;
 46 
 47 }
 48 
 49 #dots div:hover{
 50     background-color: hsla(202,60%,100%,0.8);
 51 }
 52 
 53 
 54 #dots .focus {
 55     background-color:hsla(202,60%,100%,0.8);
 56     
 57 }
 58 
 59 .arrow_left,.arrow_right{
 60     display:block;
 61     width:45px;
 62     height:108px;
 63     position:absolute;
 64     top:35%;
 65     cursor: pointer;
 66     right:-20%;
 67     background:linear-gradient( to left, rgba( 0, 0, 0, 0.3) 5%,rgba( 0, 0, 0, 0) 95%);
 68     transition: all .5s;
 69 }
 70 
 71 .arrow_left{
 72     
 73     /*//左边距离父盒子边框*/
 74     left:-45px;
 75     background: linear-gradient( to right, rgba( 0, 0, 0, 0.3) 5%,rgba( 0, 0, 0, 0) 95%);    
 76 }
 77 .arrow_right{
 78     /*//右边距离父盒子边框*/
 79     right:-45px;
 80     background: linear-gradient( to left, rgba( 0, 0, 0, 0.3) 5%,rgba( 0, 0, 0, 0) 95%);    
 81 }
 82 .arrow_right:hover{
 83     background: linear-gradient( to left, rgba( 171, 218, 244, 0.3) 5%,rgba( 171, 218, 244, 0) 95%);
 84 }
 85 .arrow_left:hover{
 86     background: linear-gradient( to right, rgba( 171, 218, 244, 0.3) 5%,rgba( 171, 218, 244, 0) 95%);
 87 }
 88 
 89  .arrow_right div{
 90     display:block;
 91     background-image:url(../img/arrow.png);
 92     background-repeat: no-repeat;
 93     height:36px;
 94     width:23px;
 95     margin:36px auto;
 96 }
 97 .arrow_left div{
 98     display:block;
 99     background-image:url(../img/arrow.png);
100     background-repeat: no-repeat;
101     height:36px;
102     width:23px;
103     margin:36px auto;
104 }
105 .arrow_left div{
106     background-position: -23px 0px;
107 }
108 .arrow_right div{
109     background-position: 0px 0px;
110 }

View Code

总结

vue.js应该是入门了，但是我js真的没怎么学，不知道是不是眼高手低，只是碰巧把东西做出来了，总之慢慢跟着官网学，如果有想法就敲想法

1/26

posted @ 2021-01-26 22:10 WaterMealone 阅读(1363) 评论(2) 编辑收藏举报

刷新页面返回顶部

WaterMealone

1/26 用vue.js简单实现轮播图

公告