vue组件开发之slider组件使用详解


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了vue组件开发之slider组件的具体使用代码,供大家参考,具体内容如下

vue组件开发之slider组件使用详解

代码如下:

<template>
  <div class="slider">
    <div class="wrapbox">
      <div class="item" v-for="(item, index) in items" style="">{{item.title}}</div>
    </div>
    <div class="status">
      <span v-for="(item, index) in items" v-bind:class="index == count ? 'active' : '' "></span>
    </div>
    <div class="prev-btn btn" @click="prev()"><</div>
    <div class="next-btn btn" @click="next()">></div>
  </div>
</template>
<script>
  export default {
    name: 'slider',
    data (){
      return {
        count: 0,
        items:[{
          name:"1",
          id:1,
          title:"我是图1的内容"
        },{
          name:"2",
          id:2,
          title:"我是图2的内容"
        },{
          name:"3",
          id:3,
          title:"我是图3的内容"
        },{
          name:"4",
          id:4,
          title:"我是图4的内容"
        }]
      }
    },
    components: { },
    methods: {
      prev () {
        console.log(this.count);
        if(this.count > 0){
          this.count--;
          document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)"; 
        }else{
          this.count = 0;
        }
      },
      next () {
        console.log(this.count);
        if(this.count < 3){
          this.count++;
          document.querySelector(".wrapbox").style.webkitTransform = "translateX(-" + (this.count * 400) + "px)"; 
        }else{
          this.count = 3;
        }

      }
    },
    created () {

    }
  }
</script>
<style scoped>
  *{margin:0 auto;padding:0;font-family:"微软雅黑";}

  .slider{
    position:relative;
    height:200px;
    width:400px;
    margin:50px auto;
    overflow:hidden;
  }
  .slider .wrapbox{
    width:1600px;
    height:200px;
    transition:all 1.5s;
  }
  .slider .status{
    position:absolute;
    top:170px;
    height:20px;
    width:400px;
    text-align:center;
  }
  .slider .status span{
    display:inline-block;
    height:20px;
    width:20px;
    margin:0 10px;
    background:#eee;
    border-radius:10px;
  }
  .slider .status span.active{
    background:#352929;
  }
  .slider .wrapbox .item{
    float:left;
    height:200px;
    width:400px;
    line-height:200px;
    text-align:Center;
    color:#fff;
    font-size:25px;
    background:red;
  }
  .slider .wrapbox .item:nth-of-type(2){
    background:blue;
  }
  .slider .wrapbox .item:nth-of-type(3){
    background:yellow;
  }
  .slider .wrapbox .item:nth-of-type(4){
    background:green;
  }
  .slider .btn{
    position:absolute;
    top:50%;
    height:40px;
    width:20px;
    line-height:40px;
    color:#fff;
    text-align:center;
    background:rgba(10, 10, 10, .85);
    transform:translateY(-50%);
    cursor:pointer;
  }
  .slider .next-btn{
    right:0;
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
Vue左滑组件slider使用详解
Aug 21 #Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
javascript document.referrer 用法
2009/04/30 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
js实现验证码干扰(静态)
2021/02/22 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Django在win10下的安装并创建工程
2017/11/20 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
查看Django和flask版本的方法
2018/05/14 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python3将变量输入的简单实例
2020/08/19 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
人事部专员岗位职责
2014/03/04 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
小学班级特色活动方案
2014/08/31 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
购房委托书
2014/10/15 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python