浅谈在vue中使用mint-ui swipe遇到的问题

使用步骤：

1.安装：npm install mint-ui -S

2.引入组件

// 完整引入import Vue from 'vue';
import Mint from 'mint-ui';
import "mint-ui/lib/style.css"
Vue.use(Mint);
// 按需引入

注意：和Element-ui类似，按需引入时需要借助babel-plugin-component插件

npm install babel-plugin-component -D

修改.babelrc{ 

"presets": [["es2015", { "modules": false }] ],
"plugins": [["component", [{"libraryName": "mint-ui","style": true }]]]
}
import { Cell, Checklist } from 'minu-ui';
Vue.use(Cell);
Vue.use(Checklist);

遇到的坑

1.轮播图是竖向的

忘记引入样式文件了import "mint-ui/lib/style.css"

2.轮播图不显示

需要在swipe所在组件的style中设定swipe容器的宽高

以上这篇浅谈在vue中使用mint-ui swipe遇到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库. 关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题:也有高度组件化,体积小等优点. 安装Mint UI: # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件: // 引入全部组件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(

  • 详解Vue2.0配置mint-ui踩过的那些坑

    最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2

  • mint-ui在vue中的使用示例

    本文介绍了mint-ui在vue中的使用示例,分享给大家,具体如下: 首先放上 mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己在用,网上能找到的资料也不是很详细,自己写写咯.持续更新...emmmmm,应该可以吧,我这么懒.希望能给别人带来帮助. 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的

  • vue中mint-ui的使用方法

    mint-ui在vue中的使用,供大家参考,具体内容如下 首先放上mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己在用,网上能找到的资料也不是很详细,自己写写咯.持续更新...emmmmm,应该可以吧,我这么懒.希望能给别人带来帮助. 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要

  • 浅谈在vue中使用mint-ui swipe遇到的问题

    使用步骤: 1.安装:npm install mint-ui -S 2.引入组件 // 完整引入import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.css" Vue.use(Mint); // 按需引入 注意:和Element-ui类似,按需引入时需要借助babel-plugin-component插件 npm install babel-plugin-component -D 修改.

  • 浅谈关于vue中scss公用的解决方案

    浅谈关于vue中scss公用的解决方案

    简述 最近由于项目要求查阅了很多关于scss公用的文章,以下只是对那些文章进行简单的总结 解决方法 a.当我们要使用scss文件的共用时,首先我们就要想到如何应当如何编辑scss文件,比如降低scss文件的变量与混入的耦合,我们可以将scss文件中的变量和混入分离开来使用单独的文件存储,此外还可以编写一些默认样式的scss文件 . variable.scss:存储scss变量的文件 @charset 'utf-8'; $bg:skyblue; $w:100px; $h:100px; $tsize

  • 浅谈使用Vue完成移动端apk项目

    浅谈使用Vue完成移动端apk项目

    我们项目使用的是Vue和Vant组件,详情都可以看官网哦 Vant Vue 完整项目视频链接 目录结构: 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入,而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './rout

  • vue前端框架—Mint UI详解（更适用于移动端）

    一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

  • 浅谈springboot项目中定时任务如何优雅退出

    在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生效. 启动类 启动类上我们获取到相应的上下文,捕捉相应命令.在这里插入代码片 @SpringBootApplication /**指定mapper对应包的路径*/ @MapperScan("com.youlanw.kz.dao") /**开启计划任务*/ @EnableScheduling

  • 浅谈XML Schema中的elementFormDefault属性

    elementFormDefault属性与命名空间相关,其值可设置为qualified或unqualified 如果设置为qualified: 在XML文档中使用局部元素时,必须使用限定短名作为前缀 sean.xsd: <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:sean=&

  • 浅谈iOS开发中static变量的三大作用

    (1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v

  • 浅谈Go语言中的结构体struct & 接口Interface & 反射

    结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struct类型理解为类,可以定义方法,和函数定义有些许区别: struct类型是值类型. struct定义 type User struct { Name string Age int32 mess string } var user User var user1 *User = &User{} var user2 *User = new(User) struct使用 下面示例中user1和

  • 浅谈pyhton学习中出现的各种问题(新手必看)

    目前比较杂乱无章,后续还会有一些添加补充 1.标识符 (1)标识符是区分大小写的. (2)标示符以字母或下划线开头,可包括字母,下划线和数字. (3)以下划线开头的标识符是有特殊意义的. 2.参数前加星号(*)的意义 面对实际情况时无法提前得知要传入的参数的个数,因此在参数前加星号从而允许函数接受任意多的参数,情况如下: (1)参数前加一个星号(*),传入的参数存储为元组的形式: (2)参数前加两个星号(*),传入的参数存储为字典的形式,并且调用时采用例如'a=1,b=2,c=3'的形式. 3.

  • 浅谈c语言中一种典型的排列组合算法

    浅谈c语言中一种典型的排列组合算法

    c语言中的全排列算法和组合数算法在实际问题中应用非常之广,但算法有许许多多,而我个人认为方法不必记太多,最好只记熟一种即可,一招鲜亦可吃遍天 全排列: #include<stdio.h> void swap(int *p1,int *p2) { int t=*p1; *p1=*p2; *p2=t; } void permutation(int a[],int index,int size) { if(index==size) { for(int i=0;i<size;i++) print

随机推荐