奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

【第一季】Vue-cli视频教程-项目实战

时间:2018-01-15 21:27来源:原创 作者:admin
项目实战就是把每个项目都用的布局进行实现,项目中遇到的难点进行思路的点破和攻克,让我们开始这段愉快的学习吧! 第1节:电商触屏幻灯片组件

项目实战就是把每个项目都用的布局进行实现,项目中遇到的难点进行思路的点破和攻克,让我们开始这段愉快的学习吧!

第1节:电商触屏幻灯片组件



双击视频观看更佳

一、幻灯片组件初始结构

幻灯片初始化视图层:

<template>
    <div class="slider-box">
        <ul>
            <li>
                <img  :src="slider_img[0]" alt="">
 
            </li>
        </ul>
    </div>
</template>

定义幻灯片的数组模型:

<script type="es6">
     export default {
          data(){
               return {
                         slider_img:[
                         require('../assets/images/slider_1.jpg'),
                         require('../assets/images/slider_2.jpg'),
                         require('../assets/images/slider_3.jpg'),
                    ]
               }
     },
}
</script>
 
data模型定义的图片需要调用require方法进行引入,否则图片出不来。

二、触屏实现下一张

定义当前幻灯片的下标数据模型:

<script type="es6">
     export default {
          data(){
               return {
                    start_x:0,
                    slider_img:[
                         require('../assets/images/slider_1.jpg'),
                         require('../assets/images/slider_2.jpg'),
                         require('../assets/images/slider_3.jpg'),
                    ]
               }
     },
 
}
</script>

在视图层的ul监听触屏开始事件:

<ul @touchstart="startTime($event)" >

方法属性里的startTime:

methods:{
     startTime:function (event) {
          this.start_x = event.targetTouches[0].clientX
          //把初始x坐标记录 

 

     }
}

二、触屏实现左右切换

在视图层的ul监听触屏移动和结束事件:

<ul @touchstart="startTime($event)"  @touchmove="moveTime($event)" @touchend="slider()">

方法属性里:

startTime:function (event) {
    this.start_x = event.targetTouches[0].clientX
   //把初始x坐标记录 
},
moveTime:function (event) {
 
   if (this.start_x > event.targetTouches[0].clientX) {
      this.direction = 'left'
   }else{
      this.direction = 'right'
   }
},
slider:function () {
      this.show = false
 
     setTimeout(()=>{
          if (this.direction == 'left') {
               if (this.cur_index == this.slider_img.length-1) {
                    this.cur_index = 0
               }else{
                    this.cur_index++
               }
          }else{
               if (this.cur_index == 0 ) { //之前的下标
                    // 下一次的下标
                    this.cur_index = this.slider_img.length-1
               }else{
                    this.cur_index--
               }
          }
 
          this.show = true
          },100)
 
     }
}


三、切换效果动画

视图层的图片标签加上transition,然后加上v-if指令即可,视频讲解请看第二节:

<template>
    <div class="slider-box">
        <ul @touchstart="startTime($event)"  @touchmove="moveTime($event)" @touchend="slider()">
            <li>
                <transition name="fade">
                    <img v-if="show" :src="slider_img[cur_index]" alt="">
                </transition>
                {{cur_index}}
            </li>
        </ul>
    </div>
</template>
 
style模块加上如下样式:
<style>
    .fade-enter-active{
           transition:all .5s;
    }
    .fade-enter{
        opacity:0
    }
 
.slider-box{height:180px;}
 
</style>


(责任编辑:admin)

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路