You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/29 12:13:34 UTC
[07/39] incubator-weex git commit: * [example] add slider scroll
event demo
* [example] add slider scroll event 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/ece44ec7
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/ece44ec7
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/ece44ec7
Branch: refs/heads/0.12-dev
Commit: ece44ec720f58a7b32c77e8bda7440ccd7514d74
Parents: bc723eb
Author: moxun.ljf <fu...@foxmail.com>
Authored: Mon Mar 27 13:01:02 2017 +0800
Committer: moxun.ljf <fu...@foxmail.com>
Committed: Mon Mar 27 13:01:02 2017 +0800
----------------------------------------------------------------------
examples/component/slider-tab.we | 100 ++++++++++++++++++++++++++++++++++
1 file changed, 100 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ece44ec7/examples/component/slider-tab.we
----------------------------------------------------------------------
diff --git a/examples/component/slider-tab.we b/examples/component/slider-tab.we
new file mode 100644
index 0000000..7a3bf8a
--- /dev/null
+++ b/examples/component/slider-tab.we
@@ -0,0 +1,100 @@
+<template>
+ <div style="padding: 25px">
+ <div style="height: 80px; flex-direction: row;">
+ <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(0)">
+ <text class="page-title">Page 1</text>
+ </div>
+ <div style="flex: 1;background-color: aquamarine;justify-content: center;align-items: center" onclick="goto(1)">
+ <text class="page-title">Page 2</text>
+ </div>
+ <div style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center" onclick="goto(2)">
+ <text class="page-title">Page 3</text>
+ </div>
+ </div>
+ <div style="height: 10px;background-color: skyblue">
+ <div style="width: 233px;height: 10px;margin-left:{{progress}}; background-color:darkblue"></div>
+ </div>
+ <slider class="slider" interval="4500" onchange="onchange" append="tree" index="{{index}}" onscroll="onscroll"
+ onchange="onchange" offset-x-accuracy="0.01">
+ <div class="frame" repeat="{{img in imageList}}">
+ <image class="image" resize="cover" src="{{img.src}}"></image>
+ <text class="title">{{img.title}}</text>
+ </div>
+ <indicator style="height: 20px"></indicator>
+ </slider>
+ </div>
+</template>
+<style>
+ .page-title {
+ color: black;
+ font-size: 40px;
+ font-weight: bold;
+ }
+
+ .image {
+ width: 700px;
+ height: 700px;
+ }
+
+ .slider {
+ width: 700px;
+ height: 700px;
+ position: absolute;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #41B883;
+ }
+
+ .title {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ padding-left: 20px;
+ width: 200px;
+ color: #FFFFFF;
+ font-size: 36px;
+ line-height: 60px;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .frame {
+ width: 700px;
+ height: 700px;
+ }
+</style>
+<script>
+ export default {
+ data: {
+ imageList: [
+ {title: 'Page 1', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
+ {
+ title: 'Page 2',
+ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
+ },
+ {
+ title: 'Page 3',
+ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
+ }
+ ],
+ index: 0,
+ progress: 0,
+ },
+ methods: {
+ onchange (event) {
+ console.log('changed:', event.index)
+ },
+ goto (i) {
+ this.index = i;
+ this.progress = i * 233;
+ },
+ onscroll (e) {
+ var ratio = parseFloat(e.offsetXRatio);
+ this.progress = 233 * this.index + (233 * -ratio);
+ },
+ onchange (e) {
+ this.goto(parseInt(e.index));
+ }
+ }
+ }
+</script>
+