vue-awesome-swiper 水平滚动异常
使用教程: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 水平滚动异常的更多相关文章
- vue 使用swiper的一些问题(页面渲染问题)
//Swiper上下滚动初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-contai ...
- IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果
很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...
- Android中如何实现多行、水平滚动的分页的Gridview?
功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Grid ...
- vue+betterscrool实现横向弹性滚动
如何利用better-scroll在vue中实现横向滚动,并且滚动到两端以后会有弹性效果 1.使用npm下载better-scroll 2.按需引入better-scroll 3.需要2个盒子装起来组 ...
- [iOS] UICollectionView实现图片水平滚动
最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- [转]HorizontalScrollView介绍--支持水平滚动的android布局容器
类概述 用 于布局的容器,可以放置让用户使用滚动条查看的视图层次结构,允许视图结构比手机的屏幕大.HorizontalScrollView是一种 FrameLayout(框架布局),其子项被滚动查看时 ...
- HorizontalScrollView水平滚动控件
HorizontalScrollView水平滚动控件 一.简介 用法ScrollView大致相同 二.方法 1)HorizontalScrollView水平滚动控件使用方法 1.在layout布局文件 ...
- 【demo练习三】:图片水平滚动、点击按钮变更图片动画
要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...
随机推荐
- LabVIEW(五):DAQ同步
1.在许多的测试测量应用当中,我们会需要在通过一个时间段内进行同步测量. 同步采集通常分为两类: (1).同时测量:即不同的任务在同一时刻开始.举例来说,我们会在一个模拟输入通道上采集数据,同时在一个 ...
- LifecycleProcessor not initialized - call 'refresh' before invoking lifecycle methods via the context: Root WebApplicationContext: startup date [Sun Jan 13 17:59:19 CST 2019]; root of context hierarch
在运行项目时出现了:LifecycleProcessor not initialized - call 'refresh' before invoking lifecycle methods via ...
- JavaScript深入(操作BOM对象)
浏览器对象模型(BOM) BOM的核心是window, 向下有: document(文档):document下由button,text,from,等等表单元素组成. location(地址对象),hi ...
- sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?
sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解. 区别1:使用限制 使用 sleep 方法可以让让当前 ...
- 10 种保护 Spring Boot 应用的绝佳方法
原文:developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot 译文:www.jdon.com/49653 Spring Boo ...
- Spark面试题
RDD怎么理解? RDD 是 Spark 的灵魂,也称为弹性分布式数据集.一个 RDD 代表一个可以被分区的只读数据集.RDD 内部可以有许多分区(partitions),每个分区又拥有大量的记录(r ...
- 好玩的原生js的简单拖拽
这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...
- mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )
一.概述 mysql 的权限系统主要用来对连接到数据库的用户进行权限验证,以此来判断此用户是否属于合法用户,以及合法用户给予的相应数据库权限.下面将介绍权限系统的工作原理,以及将要熟练掌握账号的管理和 ...
- Java代码更改shape和selector文件的颜色值
Android里面经常会使用shape或者selector来定制一些View的背景.那么如果想要动态更改shape或者seletor文件中的颜色值,该怎么处理呢? 一.Java代码更改shape的颜色 ...
- .Net程序员学用Oracle系列(19):导出、导入(备份、还原)
1.传统的导出/导入工具 1.1.EXP 命令详解 1.2.IMP 命令详解 1.3.EXP/IMP 使用技巧 2.新的导出/导入工具 2.1.EXPDP/IMPDP 参数说明 2.2.EXPDP/I ...