资讯专栏INFORMATION COLUMN

swiper的使用

aaron / 1158人阅读

摘要:是一款轮播图插件,我是用在里面,方便省事儿。官网地址地址安装安装完成之后,我没有在中注册它,而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示,所以就没必要在全局注册它,只用在页面注册使用一下就可以了。

swipe是一款轮播图插件,我是用在vue里面,方便省事儿。
swipe里面有很多关于滑动的组建,我只用过轮播图,如果以后有时间,可以再看看官网上别的组件介绍。
官网地址

github地址

安装:

npm install vue-swipe

安装完成之后,我没有在main.js中注册它,而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示,所以就没必要在全局注册它,只用在index.vue页面注册使用一下就可以了。

如何使用:

//html


    1
    2
    3
//js

//顶部引用
import { Swipe, SwipeItem } from "vue-swipe"
import "vue-swipe/dist/vue-swipe.css";

//注册局部组建
components: {
    Swipe,SwipeItem
}
//css

.carousel-figure {
    height: 150px;   //必须得给个高度,不然高度是0,啥都不显示
    .slide1 {
        background-color: blue;    
    }
    .slide2 {
        background-color: gold;
    }
    .slide3 {
        background-color: green;
    }
}

注意:其实首页轮播图我更经常用循环的方式写出来,这是项目中的代码:

//循环的时候必须绑定key,否则会出错

    
        
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113079.html

相关文章

  • 解决使用 swiper 常见问题

    摘要:图片延迟加载需要将图片标签的改写成,并且增加类名。取消拖动最后一页或者第一页时的留白状态抵抗率。边缘抵抗力的大小比例。可应用于分页器,按钮和滚动条。点击查看的文档 使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会...

    王伟廷 评论0 收藏0
  • 移动端 - 局部滚动

    摘要:对话内容超过一屏,使对话内容上移,当然是改变父元素的值啦用户可以上下滑动对话框,就类似于滚动条效果,设置父元素高度并且,子元素高度即可。遇到问题局部滚动效果,以上想法设置父元素高度并且在端可以正常滑动,但在移动端失效。 起因 我司最近在做一个H5,有一个模拟微信对话框的需求,具体需求如下。 对话内容固定,但需要一句一句显示 对话内容超过一屏后,需要使对话内容上移 对话内容结束后,用户...

    xiongzenghui 评论0 收藏0
  • Swiper插件读后感

    摘要:今天,我无意中看到这样一个东西,它叫做,这是一个开源免费的适用于各种移动端的触摸滑动插件。同时导航栏也是可以手动滑动的,当用户手动滑动导航栏,点击某一个板块时,下面的内容部分会随即滑到相应的内容块。 今天,我无意中看到这样一个东西,它叫做Swiper,这是一个开源免费的适用于各种移动端的触摸滑动插件。看了一遍文档,发现并不是很难,于是打算动手自己写一个Swiper官网上的稍复杂点的小d...

    CODING 评论0 收藏0
  • vue-awesome-swiper滑块插件使用基础

    摘要:前言目前在使用建立的版项目中,直接引入官方的文件会导致报错,所以需要用到版本的。安装版配置使用可参考插入滑块组件与官方相同,额外的控制器依然可以放到整个滑块之外。 前言 目前(2017-07-11)在使用vue-cli建立的webpack版项目中,直接引入官方的swiper文件会导致报错,所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

    microelec 评论0 收藏0
  • swiper 划不动问题

    摘要:是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。而数据在初始化之后才异步请求到,则无法正确有多少个实际上找到一个待循环模板,所以划不动。找到原因后,只须对症下药。两者默认值都为。 Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。今天在使用Swiper的时候遇到这个问题: 使用模板引擎动态生成swiper...

    eechen 评论0 收藏0

发表评论

0条评论

aaron

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<