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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
详解iframe与frame的区别
Jan 13 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
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初学者头疼问题总结
2006/07/08 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python高斯消除矩阵
2019/01/02 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
pycharm实现猜数游戏
2020/12/07 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
编辑个人求职信范文
2013/09/21 职场文书
教师个人鉴定材料
2014/02/08 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书