MpVue开发之swiper的使用
- class
- :class
- current
- :current
- bindchange
- @change
- circular
- 是否实现无限滑动 true/false
- skip-hidden-item-layout
- 轮播图性能的优化 true/false
<template>
<div class="wraper">
<div class="container">
<div class="section-two">
<div class="tab">
<a :class="currentTab=='0'?'nav active': 'nav'" data-current="0" @click="switchTab('switchTab',$event)">门诊服务</a>
<a :class="currentTab=='1'?'nav active': 'nav'" data-current="1" @click="switchTab('switchTab',$event)">住院服务</a>
<a :class="currentTab=='2'?'nav active': 'nav'" data-current="2" @click="switchTab('switchTab',$event)">综合服务</a>
</div>
<swiper class="cont" @change="switchItem('switchItem',$event)" :current="currentTab" circular="true" skip-hidden-item-layout="true">
<swiper-item><div class="item">A</div></swiper-item>
<swiper-item><div class="item">B</div></swiper-item>
<swiper-item><div class="item">C</div></swiper-item>
</swiper>
</div>
</div>
</div>
</template> <script>
export default {
data () {
return {
currentTab: "0",
}
},
components: {
},
methods: {
switchTab: function (prompt,res) {
// console.log(prompt,res);
let oIndex = res.mp.currentTarget.dataset.current;
this.currentTab = oIndex;
},
switchItem: function (prompt,res) {
// console.log(prompt,res.mp.detail.current);
let oIndex = res.mp.detail.current;
this.currentTab = oIndex;
}
},
created () {
}
}
</script> <style scoped>
.container {
flex: 1;
}
/*第二功能模块*/
.section-two {
width: 100%;
height: auto;
overflow: hidden;
background-color: #fff;
}
/*轮播图导航 */
.tab {
width: 100%;
height: 90rpx;
box-sizing: border-box;
padding: 20rpx 0 20rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #ebebeb;
}
.nav {
text-align: center;
flex: 1;
font-weight: 600;
box-sizing: border-box;
}
.nav:nth-of-type(odd) {
border-left: 1rpx solid #ebebeb;
border-right: 1rpx solid #ebebeb;
}
.nav.active {
color: #16cc80;
}
/*轮播图内容*/
.cont {
width: 100%;
height: 520rpx;
padding-top: 25rpx;
font-size: 28rpx;
}
.cont swiper-item {
width: auto;
height: 100%;
background-color: #5fd9a6;
border: 1rpx solid #ebebeb;
text-align: center;
font-size: 50rpx;
box-sizing: border-box;
}
</style>
MpVue开发之swiper的使用的更多相关文章
- 微信公众号开发之VS远程调试
目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
- Android混合开发之WebView与Javascript交互
前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...
- UWP开发之Template10实践二:拍照功能你合理使用了吗?(TempState临时目录问题)
最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...
- UWP开发之Template10实践:本地文件与照相机文件操作的MVVM实例(图文付原代码)
前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...
- UWP开发之Mvvmlight实践七:如何查找设备(Mobile模拟器、实体手机、PC)中应用的Log等文件
在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...
- Android混合开发之WebView使用总结
前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...
- Android Studio快速开发之道
概述 现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的,今天就根据自己的经验来给大家介绍一下Android Studio快速开发之道. P ...
- Android开发之Java集合类性能分析
对于Android开发者来说深入了解Java的集合类很有必要主要是从Collection和Map接口衍生出来的,目前主要提供了List.Set和 Map这三大类的集合,今天Android吧(ard8. ...
随机推荐
- Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) E. Tree Folding
地址:http://codeforces.com/contest/765/problem/E 题目: E. Tree Folding time limit per test 2 seconds mem ...
- flex NaN
如果该值为NaN(非数字),则返回true:否则返回false.public function isNaN(num:Number):Boolean 举例:NaN值不是int或uint数据类型的成员.f ...
- Spring 之自动化装配 bean 尝试
[Spring之自动化装配bean尝试] 1.添加dependencies如下所示(不是每一个都用得到 <dependencies> <dependency> <grou ...
- 【笔记】c++文件
1.文件. #include <iostream> #include <cstdio> #include <string> #include <cstring ...
- Django学习笔记之Django视图View
一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. ...
- 解决com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Specified key was too long; max key length is 767 bytes异常
错误截图: 解决方法: 用root进入mysql终端,执行以下命令: alter database hive character set latin1;
- 你知道uwsgi???
第一步,打开https://www.google.com.hk 第二步,输入how to restart uwsgi
- Spring -- spring结合aop 进行 tx&aspectj事务管理配置方法
1. tx 配置方法, 代码示例 javabean及其映射文件省略,和上篇的一样 CustomerDao.java, dao层接口 public interface CustomerDao { pub ...
- ActiveMQ_01
http://shhyuhan.iteye.com/blog/1278103http://www.cnblogs.com/blsong/archive/2012/09/26/2704337.htmlh ...
- [日常训练]AekdyCoin的跳棋
Description $AekdyCoin$正在玩一个游戏,该游戏要用到两副牌和一个数轴和一个棋子. 刚开始的时候棋子位于数轴的$0$位置.然后$AekdyCoin$交替的从两副牌中抽取一张牌,然后 ...