【weex开发】vue-swipe 滑动组件的使用

一,vue-swipe简介

vue-swipe 是饿了么团队开发的vue专用的轮播图插件;

可以实现简单的图片和view轮播,可控制动画时长,可限制手动滑动;

简而言之,可以实现轮播,也可以实现ppt样式的带动画的报告。

二,vue-swipe的引入

1,安装
$ npm install vue-swipe
2,引入依赖
import { Swipe, SwipeItem } from ‘vue-swipe‘;
 components: {
        swipe: Swipe,
        swipeItem: SwipeItem
    }
 <style lang="scss" scoped>

    @import ‘vue-swipe/dist/vue-swipe.css‘;

    ......

</style>
3,HTML使用
<swipe class="my-swipe" :auto="0" :continuous="false" :show-indicators="false" :disabled="true" :defaultIndex="0" ref="swipe" >
      <swipe-item class="slide1">1</swipe-item>
      <swipe-item class="slide2">2</swipe-item>
      <swipe-item class="slide3">3</swipe-item>
</swipe>

具体标签属性参考:https://github.com/ElemeFE/vue-swipe

参考文章:

https://github.com/ElemeFE/vue-swipe

https://segmentfault.com/a/1190000013909870

https://www.jianshu.com/p/c8788231ff2f

原文地址:https://www.cnblogs.com/neo-java/p/10327265.html

时间: 2024-11-10 12:59:30

【weex开发】vue-swipe 滑动组件的使用的相关文章

基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 可使用 babel-plugin -transform-remove-strict-mode 移除严格模式 可先进行$ n

在做weex开发时使用leancloud文件上传

不同于移动端原生开发,当开发者使用weex移动开发时,使用第三方SDK比较棘手.因为第三方的JS SDK是无法直接拿来使用的,环境不同.必须使用原生SDK,下面我介绍一下自己是如何在weex开发时(安卓)使用leancloud的服务的. 首先去leancloud的安卓SDK下载页面,下载SDK,这里我只使用了最基础的SDK包 <img src="/uploads/default/original/2X/5/582ffee695e0192ae085f0bc0e033543b316f673.p

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

android滑动组件嵌套一般思路,多任务手势思路,触摸传递思路,【例】listview嵌套viewpager

在android UI开发中,我们经常会遇到这种需求: 两个支持滑动的组件,比如listview嵌套多个listview,listview的item是一个viewpager或gallary?亦或是scrollview嵌套scrollview等等. 一般情况下,你还可能需要支持如下几种功能: ¤ 两层组件都可以滑动 ¤ 不让两个组件同时滑动,或者让两个组件同时滑动并可以自己调节 ¤ 不影响底层view的子view和嵌套view的子view的点击事件 实现上述功能时,我们也经常遇到一些问题: ¤ 点

vue.js之组件

摘要:代码复用一直是软件开发中长期存在的问题,每个开发者都想要再次使用之前写好的代码,又担心引入这段代码后对现有的程序产生影响.现在web Components的出现提供了一种新的思路,可以自定义tag标签,并拥有自身的模板,样式和交互.Vue.js提供了自己的组件系统,支持自定义tag元素和原生HTML元素的扩展 一.基本步骤 1.vue的组件使用有三个步骤:创建组件构造器.注册组件和使用组件 调用Vue.extend({...})创建组件构造器 调用Vue.component()方法注册组件

[转]VUE优秀UI组件库合集

原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本.vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀UI组件库供大家参考,期待开发者们推出更多优秀的组件库. 本文分为两大部分介绍:PC端和移动端. 首先介绍PC端

weex 开发 (已放弃了)

关于weex 开发 本菜已放弃使用了,当初选择使用weex 是为了同时支持h5 和 android / ios  三端:想法很不错,深入之后 突然发现,开发起来并没有很轻松,因为weex 中有些方法,如果你要兼容三端,可能需要你去写三套代码去实现:深感不爽,决定弃坑了! weex 开发布局方式 在weex 开发中不支持 rem/em/pt 布局方式, 目前只支持flexBox, 和以px为单位的布局方式;另外 Android 开发是不支持百分比形式的布局方式:并且weex不支持float浮动属性

webstorm开发vue配置(借)

webstorm开发vue,进行一些配置 从 File 菜单点击 Settings(OS X 下是从 WebStorm 菜单点击 Preferences)打开设置窗口,然后从左边栏选择 Plugins 项,点击"Browse repositories..."按钮. 设置js语言版本 添加vue.js模版 我们将要创建的 Vue.js 单文件组件模板内容为: 原文地址:https://www.cnblogs.com/asasas/p/9449369.html

vue配合UI组件

bootstrap 创建项目 首先使用脚手架搭出项目基本框架,具体方法可以参考前面的文章. 1,执行命令创建项目:vue init webpack-simple vue-bootstrap 2,下载相关依赖:npm vue-bootstrap 3,启动项目:npm run dev 出现这个界面就说明项目创建成功了. 引入bootstrap 1,使用之前需要先在项目中下载bootstrap,在项目根目录执行命令:npm install bootstrap 2,下载完成后,在index.html文件