使用教程: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. 关键字提取算法TF-IDF

    在文本分类的学习过程中,在“如何衡量一个关键字在文章中的重要性”的问题上,遇到了困难.在网上找了很多资料,大多数都提到了这个算法,就是今天要讲的TF-IDF. 总起 TF-IDF,理解起来相当简单,他 ...

  2. 第82节:Java中的学生管理系统

    第82节:Java中的学生管理系统 学生管理系统的删除功能 删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...

  3. Core统一日志处理

    新建一个Core的Web项目,然后创建相关文件等 添加一个处理错误的类库ErrorMiddleware   下面是该类库的代码 public class ErrorMiddleware { stati ...

  4. Java单元测试(Junit+Mock+代码覆盖率)

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  5. Spring Aop分析

    前言 上文讲述ioc框架的实现,本文开始讲述aop.在spring中aop也有3种配置方式,注解形式的我们先不讨论.我们先看看xml形式的配置方式. <aop:config> <ao ...

  6. 近期遇到的计(算)算(法)题及解(JavaScript)

    以下是近期遇到的三个计(算)算(法)题... 提到这些问题的时候简单理了下思路,后面又以JavaScript代码实现并顺便记个笔记... 至于是什么场景下遇到这些题的么... :) 问题一:从无序数组 ...

  7. java--String equals方法

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. public boolean equals(Object anObject) { //1.先和自身比较对 ...

  8. spring-session用redis实现session共享实践

    什么是spring session? Spring Session provides an API and implementations for managing a user’s session ...

  9. 浅谈ASP.NET框架

       本篇文章更适合具有一定开发经验,一定功底,且对底层代码有所研究的朋友!!! 本篇文章稍微偏原理且底层,有一定难度和且比较晦涩,文章粒度稍微粗些,更细粒度的,会在后续的文章中,结合具体的Demo实 ...

  10. MySql的创建时间和修改时间

      在创建时间字段的时候 DEFAULT CURRENT_TIMESTAMP表示当插入数据的时候,该字段默认值为当前时间 ON UPDATE CURRENT_TIMESTAMP表示每次更新这条数据的时 ...