使用教程:https://github.com/cynthiawupore/vue-awesome-swiper

实例:

<template>
<div class="index"> <swiper :options="swiperOption" class="swiper-box" ref="mySwiper">
<swiper-slide class="swiper-item">
<img src="../assets/images/bg1.png" alt="" class="w100">
</swiper-slide>
<swiper-slide class="swiper-item">
<img src="../assets/images/bg2.png" alt="" class="w100">
</swiper-slide>
</swiper> </div>
</template> <script>
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css') //注意这里 export default {
name: 'index',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
notNextTick: true,
loop:true,
initialSlide:,
autoplay: ,
direction : 'horizontal',
grabCursor : true,
onSlideChangeEnd: swiper => {}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
this.swiper.slideTo(, , false);
}
}
</script>

vue-awesome-swiper 水平滚动异常的更多相关文章

  1. vue 使用swiper的一些问题(页面渲染问题)

    //Swiper上下滚动初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-contai ...

  2. IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果

    很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...

  3. Android中如何实现多行、水平滚动的分页的Gridview?

    功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Grid ...

  4. vue+betterscrool实现横向弹性滚动

    如何利用better-scroll在vue中实现横向滚动,并且滚动到两端以后会有弹性效果 1.使用npm下载better-scroll 2.按需引入better-scroll 3.需要2个盒子装起来组 ...

  5. [iOS] UICollectionView实现图片水平滚动

    最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...

  6. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  7. [转]HorizontalScrollView介绍--支持水平滚动的android布局容器

    类概述 用 于布局的容器,可以放置让用户使用滚动条查看的视图层次结构,允许视图结构比手机的屏幕大.HorizontalScrollView是一种 FrameLayout(框架布局),其子项被滚动查看时 ...

  8. HorizontalScrollView水平滚动控件

    HorizontalScrollView水平滚动控件 一.简介 用法ScrollView大致相同 二.方法 1)HorizontalScrollView水平滚动控件使用方法 1.在layout布局文件 ...

  9. 【demo练习三】:图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

随机推荐

  1. Spring依赖注入(DI)详解

    一.依赖简介 一个典型的企业应用程序不是由一个单一的对象组成(或Spring的说法中的bean).即使是最简单的应用程序也只有几个对象一起工作来呈现最终用户看作是一个连贯的应用程序.如何从定义许多独立 ...

  2. Python爬虫1-使用urlopen

    GitHub代码练习地址:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac01_urlopen.py 爬虫简介- 爬虫定义 ...

  3. MySQL如何使用索引

    初始化测试数据 创建一个测试用的表 create table dept(id int primary key auto_increment , deptName varchar(32) not nul ...

  4. Spring 实现事务的三种方式

    事务:保证数据的运行不会说A给B钱,A钱给了B却没收到. 实现事务的三种方式(重要代码): 1.aspectJ AOP实现事务: <bean id="dataSourceTransac ...

  5. 使用 SharpZipLib 打包数据到 ZIP 文件

    SharpZipLib 是一个优秀的开源的第三方压缩库,可以通过这个库将一些导出的文件打包到一个 ZIP 文件当中供用户下载. GitHub 地址:https://github.com/icsharp ...

  6. sql server 锁与事务拨云见日(中)

    一.事务的概述 上一章节里,重点讲到了锁,以及锁与事务的关系.离上篇发布时间好几天了,每天利用一点空闲时间还真是要坚持.听<明朝那些事儿>中讲到"人与人最小的差距是聪明,人与人最 ...

  7. mysql 开发进阶篇系列 8 锁问题 (共享锁与排它锁演示)

    1 .innodb 共享锁(lock in share mode)演示 会话1 会话2 SET autocommit=0; SELECT cityname FROM  city WHERE city_ ...

  8. Android--UI之Gallery

    前言 这篇博客讲解一下Android开发中,Gallery控件的使用,这是一个画廊视图,用于展示一组图片,用固定在中间位置的水平滚动列表显示列表项的视图.Android最新的API文档中了解到,在An ...

  9. Python爬虫、自动化常用库&帮助文档URL

    一.Python下载地址 Windows终端Cmder.exe下载--->http://cmder.net/ Python下载(Windows)        ---> https://w ...

  10. 《HelloGitHub月刊》第 03 期

    <HelloGithub>第03期 兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个 ...