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 ...
随机推荐
- Android Studio 3.0 变化之 implementation与compile
Android Studio 3.0 出来很久了,本文就着重介绍一下 新版本中 Moudle 中 build.gradle 文件中的变化. 我们来看看新建一个项目在 Moudle 中的 depende ...
- shell脚本执行错误 $'\r':command not found
shell脚本执行错误 $'\r':command not found Linux下有命令dos2unix 可以用一下命令测试 vi -b filename 我们只要输入dos2unix *.sh就可 ...
- 终端(命令行)连接MySQL
语法: mysql -h 主机名(ip) -u 用户名 -P 端口 -p 说明: -h: 主机名,表示要连接的数据库的主机名或者IP -u: 用户名,表示连接数据库的用户名 -P: 端口,表示要连接的 ...
- redis5.0新特性
1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...
- Intellij IDEA神器居然还有这些小技巧
概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...
- web容器 web服务器 servlet/jsp容器 之间的区别和关系
今天学习tomcat时发现一篇写的比较好的文章,故分享给大家 Web服务器(软件): Apache http server, 这个它的网址,http://httpd.apache.org/downlo ...
- Spring框架(2)---IOC装配Bean(xml配置方式)
IOC装配Bean (1)Spring框架Bean实例化的方式提供了三种方式实例化Bean 构造方法实例化(默认无参数,用的最多) 静态工厂实例化 实例工厂实例化 下面先写这三种方法的applicat ...
- MODIS数据的下载(新地址)
Modis数据下载方法 1.1打开网址 浏览器输入地址:https://ladsweb.nascom.nasa.gov/search 注:需要一定的等待时间,如果一直打不开,就需要FQ.(网址加载了g ...
- 项目详解2—LVS负载均衡详解
一.负载均衡集群介绍 1.集群 ① 集群(cluster)技术是一种较新的技术,通过集群技术,可以在付出较低成本的情况下获得在性能.可靠性.灵活性方面的相对较高的收益,其任务调度则是集群系统中的核心技 ...
- centos安装Nginx1.9.9
今天在安装centos的时候,又出现了yum报错的情况,弄了半个小时就弄好,就直接放弃了,使用了VMware快照功能.(快照功能要经常使用,我使用的频率不高,所以这次又造成了以前安装好的很多模块又得重 ...