<template>
<div>
<div class="swipe-wrapper">
<mt-swipe :auto="1000" ref="swipeWrapper">
<mt-swipe-item class="swip-item-1 item">1</mt-swipe-item>
<mt-swipe-item class="swip-item-2 item">2</mt-swipe-item>
<mt-swipe-item class="swip-item-3 item">3</mt-swipe-item>
</mt-swipe>
</div>
<div class="button-wrapper">
<button class="prev-button flex-item" @click="prev">prev</button>
<button class="next-button flex-item" @click="next">next</button>
</div>
</div>
</template> <script>
export default {
data() {
return {};
},
methods: {
prev: function() {
this.$refs.swipeWrapper.prev();
console.log(this.$children);
},
next: function() {
this.$refs.swipeWrapper.next();
}
}
};
</script> <style>
.swipe-wrapper {
width: 100%;
height: 300px;
} .swip-item-1 {
background: red;
} .swip-item-2 {
background: blue;
} .swip-item-3 {
background: green;
} .item {
text-align: center;
font-size: 40px;
color: white;
} .button-wrapper {
display: flex;
height: 100px;
} .flex-item {
flex: 1;
display: inline-block;
text-align: center;
height: 100%;
line-height: 100%;
font-size: 40px;
} .prev-button {
background: darkorange;
} .next-button {
background: green;
}
</style>

mint-ui之Swipe使用的更多相关文章

  1. Mint UI 之 Swipe 组件

    #为什么不显示内容? 一定要指定 mt-swipe 元素的宽和高. <mt-swipe :auto="4000" class="swipe"> &l ...

  2. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  3. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  4. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  5. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  6. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  7. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  8. iView webapp / Mint UI / MUI [前端UI]

    前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...

  9. Mint UI 使用指南

    上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...

  10. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

随机推荐

  1. python class 1

    //test.py class Employee: 'all employee' empCount = 0 def __init__(self, name, salary): self.name = ...

  2. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  3. Robot FrameWork使用中常见问题收集

    1.“假死”现象 在完成一个模块的脚本编写后,多次运行没问题,但是隔了几天再来运行的时候,发现脚本运行会出现浏览器那边不动了,脚本这边的时间一直在跑. 问题原因及解决方法: 问题解决了,原因是**dr ...

  4. LeetCode122.买卖股票的最佳时机II

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...

  5. 有复选框情况下,sql拼写技巧

    复选框选中只取合格的数据,没有选中取所有的数据. string filterOk = (ckbOnlyOk.Checked ? " and (jyjg='合格') " : &quo ...

  6. python 将文件大小转换为human readable 的大小表示

    定义了一个函数, def HRS(size):    units=('B','KB','MB','GB','TB','PB')    for i in range(len(units)-1,-1,-1 ...

  7. 变量part2

    一 变量值具有三个特征:  1. id:变量值的唯一编号,内存地址不同id则不同  2. type:类型  3. value(值) #name='xia' #print(id(name)) #age= ...

  8. Python 7 -- 文件存储数据

    上一节总结了一个基本web应用的代码,这一节主要讲用户访问的数据记录在log文件中,并显示在页面上. 这节步骤: 按以下目录建好相应的文件夹及内容 webapp|----vsearch4web.py ...

  9. redis 缓存刷新

  10. vue-i18n国际化插件

    vue-i18n国际化插件 安装,到项目目录下执行:npm install vue-i18n 配置在src\main.js里面引入vue-i18n // 语言包插件import VueI18n fro ...