swiper

swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作。Swiper中文网

安装和导入插件
npm i vue-awesome-swiper - S
//在main.js中导入swiper
import Vue from "vue" 
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.min.css"
Vue.use(VueAwesomeSwiper)
//在需要使用swiper的组件中导入具体的组件
import { swiper, swiperSlide } from "vue-awesome-swiper"
swiper的html结构
<template>
    <swiper :options="swiperOption" ref="mySwiper"> //swipe标签会生成两个div,类名为:swiper-container和swiper-wrapper
        <swiper-slide class="slider1 slides">slider1</swiper-slide> //swiper-slide标签会生成一个div,.类名为:swiper-slide
        <swiper-slide class="slider2 slides">slider2</swiper-slide>
        <swiper-slide class="slider3 slides">slider3</swiper-slide>
    </swiper>
</template>

swiper-container包含swiper-wrapper,swiper-wrapper包含了可滑动的项swiper-slide。

vue配置

以下data中的swiperOption包含的配置项在swiper网站上的API可以查询,以下是基本配置

import {swiper,swiperSlider} from "vue-awesome-swiper"

export default {
    data:function() {
        return {
            swiperOption:{
                autoplay: 3000,
                direction: "horizontal",//默认横向滑动,可取值veritical
                setWrapperSize: true, //true时,自动计算slide元素的宽的总和并应用到祖先元素上
                autoHeight: true, //true时,自动计算slide元素的高的总和并应用到祖先元素上                
                paginationClickable: true,
                notNextTick: true,
                mousewheelControl : true,            
                observeParents: true //随着浏览器大小而自动改变自身大小                
            }
        }
    },
    components:{
        swiper:swiper,
        swiperSlider:swiperSlider
    }
}

css

.slider1{
    background: red;
}

.slider2{
    background: rgb(0, 12, 179);
}

.slider3{
    background: rgb(0, 116, 170);
}

.swiper-slide{
    color:#fff;
    font-size:20px;
    font-weight: bolder;
    line-height: 300px;
    height:300px;
}

按钮配置(上一张下一张)

将以下两个按钮标签放入swiper-container中

<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> 

在swiperOption中配置

navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
}

更改按钮的背景图片

.swiper-button-prev{
    background: url("/src/img/left.png") !important;
}
.swiper-button-next{
    background: url("/src/img/right.png") !important;
}
swiper滑动导航栏
<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
            <a href="#">1体育</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">2音乐</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">3读书</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">4市场</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">5租房</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">6财经</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">7慈善</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">8金融</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">9汽车</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">10明星</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">11热线</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">12数码</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">13军事</a>
        </swiper-slide>
        <swiper-slide>
            <a href="#">14地理</a>
        </swiper-slide>
    </swiper>
</template>
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  data: function() {
    return {
      swiperOption: {
        slidesPerView: 7, //一次滑动一组,一组7个slide
        autoplay: 3000,
        direction: "horizontal", 
        setWrapperSize: true, 
        autoHeight: true,     //true时,自动计算slide元素的宽的总和并应用到祖先元素上
        paginationClickable: true, //true时,自动计算slide元素的高的总和并应用到祖先元素上
        observeParents: true 
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  }
};
.swiper-container {
    background: rgb(231, 231, 231);

    .swiper-wrapper {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;

        .swiper-slide {
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;

            a {
                color: rgb(58, 58, 58);
                font-size: 1.3em;
            }
        }
    }
}

导航栏点击变色

导航栏是滑动一次,移动一组,无法为被选中的项设置背景色,但可以通过获取swiper对象的属性得到它的各个slide项来设置背景色

<swiper-slide v-for="item in linkName" :key="item.id">
    <a href="#" @click="getImgs(item.id,true)">{{item.linkName}}</a> 
</swiper-slide>

在vue的methods的某个方法中为被点击的slide增加className

if (click) {
    var aa = self.$refs.mySwiper.swiper.slides; //mySwiper得到swiper所在的组件,swiper得到swiper插件
    for (var i = 0; i < aa.length; i++) {
        console.log(aa[i]);
        self.removeClass(aa[i], "nav-active");
    }
    self.$refs.mySwiper.swiper.clickedSlide.className =
        "nav-active swiper-slide swiper-slide-next";
}

removeClass

根据条件移除参数指定的类名

removeClass: function(obj, classname) {
    if (obj.className != "") {
    var arrClassName = obj.className.split(" ");
    var _index = arrIndexOf(arrClassName, classname);
    //如果有需要移除的class
    if (_index != -1) {
        arrClassName.splice(_index, 1); //删除存在的class值
        obj.className = arrClassName.join(" "); //将数组以空格连接成字符串放到元素的class属性里
    }
    }
    function arrIndexOf(arr, v) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == v) {
        return i;
        }
    }
    return -1;
    }
}

选中时的背景色

.nav-active {
  background: brown;
}

.nav-active a {
  color: #fff !important;
}

vue-preview

这个插件是一个照片浏览器,参考Vue preview plugin

安装

在main.js引入
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

如果需要特殊配置vue-preview,可以如下注册vue-preview

Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})
数据

以下数据的各项属性是vue-preview需要用到的

[
      {
            "id":1,
             "src": "/src/img/1_big.jpg", 大图
            "msrc": "/src/img/1_small.jpg", 小图
            "alt": "",
            "title": ""        
      },
      {
            "id":2,
            "src": "/src/img/2_big.jpg",
            "msrc": "/src/img/2_small.jpg",
            "alt": "",
            "title": ""        
      }
]

配置

在组件中只需要如下插入图片查看器的html标签,不需要使用v-for,它会自动到组件对象里的data里的slide1中取数据,自动循环填充

<vue-preview :slides="slide1" class="imgPrev"></vue-preview>

组件对象内部

export default {
  data: function() {
    return {      
      slide1: [ ]
    };
  },
  methods: {
    getImgs: function() {
      var self = this;
      self.$ajax
        .get("http://localhost:3000/src/json/shareImgInfo.json")
        .then(response => {
          var tt = response.data.filter((item, index) => {    
            if (item.sourceID == self.sourceID) {        
                item.w = 500; //需要设置图片在放大后的宽高,每张图片的宽高尺寸都是一样的
                item.h = 400;
                return item;
            }
          });
          self.slide1 = tt;
        })
        .catch(error => {
          Toast("数据加载失败"+error);
        });
    }
  },
  created: function() {
    this.getImgs();
  }
};

css

图片查看器生成的代码层次是:div.imgPrev>div.my-gallery>figure>a>img

.imgPrev .my-gallery figure{
      width:25%;
      margin:0;
      display: inline-block !important; 
 }
.imgPrev .my-gallery figure a{
      display: block;
      width:100%;
}
.imgPrev .my-gallery figure a img{
      width:100%;
      vertical-align: middle;
}

可以直接把w和h属性放到json数据里,这样可以做到放大不同宽高尺寸的图片

[
    {
        "id": 1,
        "src": "/src/img/1_big.jpg",
        "msrc": "/src/img/1_small.jpg",
        "alt": "",
        "title": "",
        "w": 600,
        "h": 460
    },
    {
        "id": 2,
        "src": "/src/img/2_big.jpg",
        "msrc": "/src/img/2_small.jpg",
        "alt": "",
        "title": "",
        "w": 800,
        "h": 210
    }
]
sweetalert2 模态框
npm i sweetalert2--save - dev
import swal from 'sweetalert2';
import "sweetalert2/dist/sweetalert2.min.css";
const swalPlugin = {};

swalPlugin.install = function (Vue) {
    swal.setDefaults({
        confirmButtonClass: 'btn btn-primary',
        cancelButtonClass: 'btn btn-default',
        buttonsStyling: true,
        showCloseButton: true
    });
    Vue.prototype.$swal= swal;
};

Vue.use(swalPlugin);

调用

this.$swal('hello vue')

更多参考:sweetalert2

vue-blu
npm i vue-blu -S
//npm包
import Vue from "vue";
import VueBlu from "vue-blu";
import "vue-blu/dist/css/vue-blu.min.css";

Vue.use(VueBlu);

调用

<modal title="提示" :is-show="isShow" :show-header="true" @close="isShow=false" :on-ok="getLogin" ok-text="确定"  :show-cancel="false">
    <h4></h4>
    <p>
       登录成功
    </p>
</modal>
<button @click="toggle">登录</button>
export default {
    data: function () {
        return {
            isShow: false
        }
    },
    methods: {
        toggle() {
            //验证登录后
            this.isShow = true;
        },
        getLogin: function () {
            //点击模态框的ok按钮手动转向
            this.$router.push("/circlefriend/");
        }
    }
}
//按钮颜色
.is-primary{
    background-color:red !important;
}

更多参考:vue-blu,API配置是写入modal标签里,而$modal全局对象的配置则是在调用this.$modal对象的方法里配置

 

  

npm i vue-blu -S

 

Javascript - 学习总目录

vue-bluJavascript - Vue - 插件(swiper、vue-preview)的更多相关文章

  1. vue中使用时间插件、vue使用laydate

    <input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...

  2. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  3. 黄聪:如何正确在Vue框架里使用Swiper

    实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用) 第一步: 安装  npm i swiper (vue插件自带) 第二步: 在当前页面里引入 ...

  4. vue轮播插件vue-awesome-swiper

    https://surmon-china.github.io/vue-awesome-swiper/ 第一步安装 npm install vue-awesome-swiper --save 第二部在m ...

  5. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  6. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  7. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

  8. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  9. sublime的Vue语法高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  10. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

随机推荐

  1. 详解Lombok中的@Builder用法

    Builder 使用创建者模式又叫建造者模式.简单来说,就是一步步创建一个对象,它对用户屏蔽了里面构建的细节,但却可以精细地控制对象的构造过程. 基础使用 @Builder注释为你的类生成相对略微复杂 ...

  2. 数组去重汇总—v客学院技术分享

    上周基础班结束了数组的学习内容,这几天有时间整理了下几种比较常用的数组去重的方法供大家查阅!!!!! 话不多说,直接贴代码吧~~~~~~~ 欢迎大家指正,共同学习,一同进步!!! (php开发,web ...

  3. visibility:hidden和display:none的区别

    一.相同点 disable:none和visibility:hidden都能把网页上的某元素隐藏起来 二.不同点 display:none--不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  4. RTB1靶机

    一.信息收集 信息收集 http://192.168.111.132/Hackademic_RTB1/?cat=1 http://192.168.111.132/Hackademic_RTB1/?ca ...

  5. SpringBoot系列——动态定时任务

    前言 定时器是我们项目中经常会用到的,SpringBoot使用@Scheduled注解可以快速启用一个简单的定时器(详情请看我们之前的博客<SpringBoot系列--定时器>),然而这种 ...

  6. python ui自动化之多窗口切换

    wd.current_window_handle #获取当前窗口句柄 wd.window_handles #获取所有窗口句柄 wd.switch_to.window(wd.window_handles ...

  7. Android面试中多说这么一句话,薪水直接涨5k

    小鱼同学最近很难受,明明获得了人人羡慕的大厂Offer,走在路上都能被熟人祝贺,学弟学妹争着抢着求他进行经验分享. 但有件事一直让他很介意.其实这件事起因很简单,是关于这份Offer的薪资问题,面试的 ...

  8. Linux命令(三)vim编辑器的常用命令

    .subTitle { background: rgba(51, 153, 0, 0.53); border-bottom: 1px solid rgba(0, 102, 0, 1); border- ...

  9. iptables 及容器网络分析

    本文独立博客阅读地址:https://ryan4yin.space/posts/iptables-and-container-networks/ 本文仅针对 ipv4 网络 iptables 提供了包 ...

  10. Java集合框架和数组的排序(转载)

    Java集合框架(*Collection)*和数组的排序 ​ 根据约定,在使用java编程的时候应尽可能的使用现有的类库,当然你也可以自己编写一个排序的方法,或者框架,但是有几个人能写得比JDK里的还 ...