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 Tools 开发工具库开源项目总结
在Android开发中,我们不免会遇到使用一些工具库来简化我们的工具代码的编写,以下是本人之前star的开源项目,供大家参考: 一.android_testsuite 项目地址:https://git ...
- webpack严格模式!!!忽略
1. babel5 babel: { options: { blacklist: ["useStrict"], // ... }, // ... } 2. babel6 修改.ba ...
- 第62节:探索Java中的网络编程技术
前言 感谢! 承蒙关照~ 探索Java中的网络编程技术 网络编程就是io技术和网络技术的结合,网络模型的定义,只要共用网络模型就可以两者连接.网络模型参考. 一座塔有七层,我们需要闯关. 第一层物理层 ...
- 【详记MySql问题大全集】一、安装MySql
最近公司要从SqlServer转到MySql,期间在安装环境和数据迁移的过程中,遇到了一些不大不小问题,比如怎么重置密码.怎么设置大小写敏感等等. 这些问题都比较细比较杂,这边解决完可能过几天就忘了, ...
- 在Java里>、>>、>>>的含义
在java中: >表示大于,如:if(a>b)...结果是boolean类型 >>表示右移,如:int i=15; i>>2的结果是3,移出的部分将被抛弃. 转为二 ...
- [EXP]Microsoft Windows - DfMarshal Unsafe Unmarshaling Privilege Escalation
Windows: DfMarshal Unsafe Unmarshaling Elevation of Privilege (Master) Platform: Windows (not tested ...
- 必须要会的 50 个 React 面试题
翻译:疯狂的技术宅 原文:www.edureka.co/blog/interv… 如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你.本文是你学习和面试 React 所需知识的完美指南. ...
- python 备忘
import jsonu='''{ "maps": [ { "id": "blabla", "iscategorical" ...
- Oracle 理论到实践之碎碎念
有关 Oracle 的著名谣传 1.如果你想把表中数据复制到另一张表,或者想根据现有表创建一个类似的新表,网上有大量不明所以的帖子告诉你实现该功能的语法是select field1,field2 in ...
- Spring Boot中使用断路器
断路器本身是电路上的一种过载保护装置,当线路中有电器发生短路时,它能够及时的切断故障电路以防止严重后果发生.通过服务熔断(也可以称为断路).降级.限流(隔离).异步RPC等手段控制依赖服务的延迟与失败 ...