使用教程: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. IDEA环境下GIT操作浅析之一Idea下仓库初始化与文件提交涉及到的基本命令

    目标总括 idea 下通过命令操作文件提交,删除,与更新并推送到github 开源库基本操作idea 下通过命令实现分支的创建与合并操作 idea 下通过图形化方式实现idea 项目版本控制基本操作 ...

  2. SpringMVC核心接口

    简单配置SpringMVC SpringMVC的实现原理是通过Servlet拦截所有URL达到控制目的,所以web.xml的配置是必须的 ContextLoaderListener ContextLo ...

  3. Spark streaming消费Kafka的正确姿势

    前言 在游戏项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark streaming从kafka中不 ...

  4. GDB dump mem example和命令

    使用方法: You can use the commands dump, append, and restore to copy data between target memory and a fi ...

  5. List,泛型和Datatable 的相互转换

    public static DataTable ToDataTableTow(IList list) { DataTable result = new DataTable(); ) { Propert ...

  6. Ocelot简易教程(七)之配置文件数据库存储插件源码解析

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...

  7. Linux编程 12 (默认shell环境变量, PATH变量重要讲解)

    一 .概述 默认情况下, bash shell会用一些特定的环境变量来定义系统的环境.这些默认环境变量可以理解是上篇所讲的系统全局环境变量. 1.1 bash  shell支持的Bourne变量 Bo ...

  8. Tomcat中server.xml配置详解(2)

    Tomcat中配置文件详解 Server.xml配置文件说明,以及Tomcat组件的说明 Tomcat服务器是由一系列可以配置的组件构成,其中核心组件是Catalina Servlet,它是最顶层组件 ...

  9. [NewLife.XCode]高级查询(化繁为简、分页提升性能)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...

  10. Hadoop-HDFS

    HDFS - 写文件 1.客户端将文件写入本地磁盘的N#x4E34;时文件中 2.当临时文件大小达到一个block大小时,HDFS client通知NameNode,申请写入文件 3.NameNode ...