Permalink
Browse files

add slide

  • Loading branch information...
1 parent 4b5289d commit 0bfd60a80e9c897ccd6cd5cfd64a4c5c89e05abc @lihongxun945 lihongxun945 committed Aug 18, 2016
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -29,21 +29,21 @@
}
.slide-enter {
opacity: 0;
- transform: translate3d(50%, 0, 0);
+ transform: translate3d(70%, 0, 0);
}
.slide-leave {
opacity: 0;
- transform: translate3d(-50%, 0, 0);
+ transform: translate3d(-70%, 0, 0);
}
.transition-reverse {
.slide-enter {
opacity: 0;
- transform: translate3d(-50%, 0, 0);
+ transform: translate3d(-70%, 0, 0);
}
.slide-leave {
opacity: 0;
- transform: translate3d(50%, 0, 0);
+ transform: translate3d(70%, 0, 0);
}
}
@@ -0,0 +1,9 @@
+<script>
+import Wrapper from './wrapper'
+import Slide from './slide'
+
+export default {
+ Slide,
+ SlideWrapper: Wrapper
+}
+</script>
@@ -0,0 +1,5 @@
+.slide {
+ width: 100vw;
+ min-height: 10rem;
+ flex-shrink: 0;
+}
@@ -0,0 +1,16 @@
+<template>
+ <div class="slide">
+ <slot></slot>
+ </div>
+</template>
+
+<style lang="less" scoped>
+@import './slide.less';
+</style>
+
+<style lang="less">
+.slide img {
+ display: block;
+ width: 100%;
+}
+</style>
@@ -0,0 +1,5 @@
+.slide-inner {
+ display: flex;
+ width: 100%;
+ overflow: hidden;
+}
@@ -0,0 +1,21 @@
+<template>
+ <div class="slide-wrap">
+ <div class="slide-inner" @touchmove="touchmove($event)">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ methods: {
+ touchmove (e) {
+ console.log(e)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+@import './wrapper.less';
+</style>
@@ -25,12 +25,11 @@ export default {
},
duration: {
type: Number,
- default: 3000,
- required: false
+ default: 3000
},
overlay: {
type: Boolean,
- default: false
+ default: true
}
},
watch: {
View
@@ -148,6 +148,14 @@
Calendar
</p>
</a>
+ <a v-link="{ path: 'slide' }" class="grid">
+ <div class="grid_icon">
+ <img src="../assets/images/home/calendar.png" alt="">
+ </div>
+ <p class="grid_label">
+ Slide
+ </p>
+ </a>
</div>
</content>
</template>
View
@@ -0,0 +1,29 @@
+<template>
+ <div class="page">
+ <simple-header title="Slide" :back-link="true"></simple-header>
+ <content>
+ <slide-wrapper>
+ <slide><img src="../assets/images/slide/0.jpg" /></slide>
+ <slide><img src="../assets/images/slide/0.jpg" /></slide>
+ <slide><img src="../assets/images/slide/0.jpg" /></slide>
+ <slide><img src="../assets/images/slide/0.jpg" /></slide>
+ <slide><img src="../assets/images/slide/0.jpg" /></slide>
+ </slide-wrapper>
+ </content>
+ </div>
+</template>
+
+<script>
+import Content from '../components/content'
+import { SimpleHeader } from '../components/header'
+import { SlideWrapper, Slide } from '../components/slide'
+
+export default {
+ components: {
+ Content,
+ SimpleHeader,
+ SlideWrapper,
+ Slide
+ }
+}
+</script>
View
@@ -30,6 +30,7 @@ import Toast from './demos/Toast'
import Searchbar from './demos/Searchbar'
import Calendar from './demos/Calendar'
import Result from './demos/result'
+import Slide from './demos/slide'
Vue.config.debug = true
@@ -104,6 +105,10 @@ router.map({
'/result': {
name: 'result',
component: Result
+ },
+ '/slide': {
+ name: 'slide',
+ component: Slide
}
})
View
@@ -0,0 +1,2 @@
+- 封装 swipe 等简单的事件
+- Vue.use(Vum) 来初始化一些配置

0 comments on commit 0bfd60a

Please sign in to comment.