You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/04/11 06:23:51 UTC
[10/19] incubator-weex git commit: * [html5] add slider infinte demo
* [html5] add slider infinte demo
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/44866b74
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/44866b74
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/44866b74
Branch: refs/heads/0.12-dev
Commit: 44866b749415234e9969d31a56505a18adbcac5f
Parents: 66df2cb
Author: tancy <ro...@gmail.com>
Authored: Fri Apr 7 12:03:15 2017 +0800
Committer: tancy <ro...@gmail.com>
Committed: Fri Apr 7 12:03:15 2017 +0800
----------------------------------------------------------------------
examples/vue/components/sliderinfinite.vue | 46 +++++++++++++++++++++++++
1 file changed, 46 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/44866b74/examples/vue/components/sliderinfinite.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/sliderinfinite.vue b/examples/vue/components/sliderinfinite.vue
new file mode 100644
index 0000000..4a3702e
--- /dev/null
+++ b/examples/vue/components/sliderinfinite.vue
@@ -0,0 +1,46 @@
+<template>
+ <div>
+ <slider class="slider" interval="3000" auto-play="true">
+ <div class="frame" v-for="img in imageList">
+ <image class="image" resize="cover" :src="img.src"></image>
+ </div>
+ </slider>
+ </div>
+</template>
+
+<style scoped>
+ .image {
+ width: 700px;
+ height: 300px;
+ }
+ .slider {
+ margin-top: 25px;
+ margin-left: 25px;
+ width: 700px;
+ height: 300px;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #41B883;
+ }
+ .frame {
+ width: 700px;
+ height: 300px;
+ position: relative;
+ }
+</style>
+
+<script>
+ export default {
+ data () {
+ return {
+ imageList: [
+ { src: 'https://gw.alicdn.com/tfs/TB1SA2wQXXXXXXDapXXXXXXXXXX-1400-600.png'},
+ { src: 'https://gw.alicdn.com/tfs/TB1KS_OQXXXXXcSXVXXXXXXXXXX-1400-600.png'},
+ { src: 'https://gw.alicdn.com/tfs/TB1Ez7XQXXXXXbNXXXXXXXXXXXX-1400-600.png'},
+ { src: 'https://gw.alicdn.com/tfs/TB1XLn6QXXXXXb2XpXXXXXXXXXX-1400-600.png'}
+ ]
+
+ }
+ }
+ }
+</script>
\ No newline at end of file