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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
js编写选项卡效果
May 23 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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
星际中的相关伤害
2020/03/04 星际争霸
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python list和str互转的实现示例
2020/11/16 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
营销与策划专业毕业生求职信
2013/11/01 职场文书
保安自我鉴定范文
2013/12/08 职场文书
开业庆典答谢词
2014/01/18 职场文书
家长对孩子评语
2014/01/30 职场文书
村党组织公开承诺书
2015/04/30 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers