From bc723eb9012b93b30d82712cdf98c28b09b8342f Mon Sep 17 00:00:00 2001
From: "moxun.ljf" <moxun.ljf@alibaba-inc.com>
Date: Thu, 23 Mar 2017 13:45:38 +0800
Subject: [PATCH 1/2] * [example] add demo for list & scroller with onScroll
 event (cherry picked from commit 7f60621)

---
 examples/component/list/list-basic.we | 75 +++++++++++++++++++--------
 examples/component/scroller-demo.we   | 64 ++++++++++++++++-------
 2 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/examples/component/list/list-basic.we b/examples/component/list/list-basic.we
index f7e0efc4f9..37f9c252b0 100644
--- a/examples/component/list/list-basic.we
+++ b/examples/component/list/list-basic.we
@@ -1,8 +1,15 @@
 <template>
   <div>
-    <list class="list">
-      <refresh  class = "refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
-        <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh </text>
+    <div style="background-color: #eeeeee">
+      <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text>
+      <div style="height: 20px;width: 750px;border-color: black;border-width: 2px;justify-content: center">
+        <div style="height: 14px;width: {{progress_width}};margin-left:{{progress}};background-color: gray"></div>
+      </div>
+      <text style="width: 750px">{{event}}</text>
+    </div>
+    <list id="list" class="list" onscroll="{{onScroll}}" offset-accuracy="5">
+      <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
+        <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh</text>
         <loading-indicator class="indicator"></loading-indicator>
       </refresh>
       <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}">
@@ -11,26 +18,27 @@
         </div>
       </cell>
       <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
-        <text if="{{(loading_display==='hide')}}">↑ Loadmore </text>
+        <text if="{{(loading_display==='hide')}}">↑ Loadmore</text>
         <loading-indicator class="indicator"></loading-indicator>
       </loading>
     </list>
-    <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text>
   </div>
 </template>
 
 <style>
   .list {
-    height:850
+
   }
+
   .count {
     font-size: 48;
-    margin:10;
+    margin: 10;
   }
+
   .indicator {
     height: 40;
     width: 40;
-    color:#45b5f0;
+    color: #45b5f0;
   }
 
   .refresh-arrow {
@@ -41,16 +49,18 @@
   .row {
     width: 750;
   }
-  
+
   .item {
     justify-content: center;
     border-bottom-width: 2;
     border-bottom-color: #c0c0c0;
     height: 100;
-    padding:20;
+    padding: 20;
   }
+
   .item-title {
   }
+
   .refresh-view {
     width: 750;
     height: 100;
@@ -62,6 +72,7 @@
     -webkit-box-align: center;
     align-items: center;
   }
+
   .loading-view {
     width: 750;
     height: 100;
@@ -73,6 +84,7 @@
     -webkit-box-align: center;
     align-items: center;
   }
+
   .indicator {
     height: 60;
     width: 60;
@@ -81,7 +93,8 @@
 </style>
 
 <script>
-
+  var dom = weex.requireModule('dom');
+  var isFirst = true;
   module.exports = {
     methods: {
       onappear: function (e) {
@@ -91,7 +104,7 @@
         appearIds.push(appearId);
         this.getMinAndMaxIds(appearIds);
       },
-      ondisappear:function (e) {
+      ondisappear: function (e) {
         var disAppearId = this.rows[e.target.attr.index].id;
         nativeLog('+++++', disAppearId);
         var appearIds = this.appearIds;
@@ -101,15 +114,15 @@
         }
         this.getMinAndMaxIds(appearIds);
       },
-      getMinAndMaxIds:function (appearIds) {
-        appearIds.sort(function(a, b) {
+      getMinAndMaxIds: function (appearIds) {
+        appearIds.sort(function (a, b) {
           return a - b;
         });
         this.appearIds = appearIds;
         this.appearMax = appearIds[appearIds.length - 1];
         this.appearMin = appearIds[0];
       },
-      onrefresh: function(e) {
+      onrefresh: function (e) {
         var self = this;
         self.refresh_display = 'show';
         self.$call('modal', 'toast', {
@@ -121,7 +134,7 @@
         }, 3000);
       },
 
-      onloading: function() {
+      onloading: function () {
         var self = this;
         self.loading_display = 'show';
         self.$call('modal', 'toast', {
@@ -130,19 +143,37 @@
 
         this.$call('timer', 'setTimeout', function () {
           if (self.rows.length <= 33) {
-              self.rows.push(self.moreRows[self.rows.length - 29]);
-            }
+            self.rows.push(self.moreRows[self.rows.length - 29]);
+          }
           self.loading_display = 'hide';
         }, 3000);
       },
+
+      onScroll: function (e) {
+        var self = this;
+        this.event = 'contentOffset: ' + JSON.stringify(e.contentOffset) + '\ncontentSize: ' + JSON.stringify(e.contentSize);
+        dom.getComponentRect(this.$el('list'), function (ret) {
+          if (e.contentOffset.x == 0 && e.contentOffset.y == 0 && isFirst) {
+            isFirst = false;
+            return;
+          }
+          var listHeight = ret.size.height;
+          self.progress_width = (listHeight / e.contentSize.height) * 750;
+          var offsetY = e.contentOffset.y > 0 ? 0 : Math.abs(e.contentOffset.y);
+          self.progress = (offsetY / (e.contentSize.height - listHeight)) * (750 - self.progress_width);
+        });
+      }
     },
     data: {
+      progress_width: 0,
+      progress:0,
+      event:'-',
       refresh_display: 'hide',
       loading_display: 'hide',
-      appearMin:1,
-      appearMax:1,
-      appearIds:[],
-      rows:[
+      appearMin: 1,
+      appearMax: 1,
+      appearIds: [],
+      rows: [
         {id: 1},
         {id: 2},
         {id: 3},
diff --git a/examples/component/scroller-demo.we b/examples/component/scroller-demo.we
index 750fd782ba..a484bb00b4 100644
--- a/examples/component/scroller-demo.we
+++ b/examples/component/scroller-demo.we
@@ -1,25 +1,34 @@
 <template>
-  <scroller class="list" append="tree">
+  <div>
+    <div style="height: 20px;width: 750px;border-color: black;border-width: 2px;justify-content: center">
+      <div style="height: 14px;width: {{progress_width}};margin-left:{{progress}};background-color: gray"></div>
+    </div>
+    <text style="width: 750px">{{event}}</text>
 
-    <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
-      <loading-indicator class="indicator" ></loading-indicator>
-      <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)" if="{{(refresh_display==='hide')}}">Pull To Refresh</text>
-    </refresh>
+    <scroller id="scroller" onscroll="{{onScroll}}">
 
-    <div class="section" repeat="{{sections}}">
-      <div class="header">
-        <text class="header-title">{{title}}</text>
-      </div>
-      <div class="item" repeat="{{items}}">
-        <text class="item-title">row {{id}}</text>
+      <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
+        <loading-indicator class="indicator"></loading-indicator>
+        <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)"
+              if="{{(refresh_display==='hide')}}">Pull To Refresh
+        </text>
+      </refresh>
+
+      <div class="section" repeat="{{sections}}">
+        <div class="header">
+          <text class="header-title">{{title}}</text>
+        </div>
+        <div class="item" repeat="{{items}}">
+          <text class="item-title">row {{id}}</text>
+        </div>
       </div>
-    </div>
 
-    <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
-      <loading-indicator class="indicator" ></loading-indicator>
-    </loading>
+      <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
+        <loading-indicator class="indicator"></loading-indicator>
+      </loading>
 
-  </scroller>
+    </scroller>
+  </div>
 </template>
 
 <style>
@@ -85,33 +94,48 @@
 
 <script>
   require('weex-components');
+  var dom = weex.requireModule('dom');
   module.exports = {
     methods: {
-      onrefresh: function(e) {
+      onrefresh: function (e) {
         var self = this;
         self.refresh_display = 'show';
         self.$call('modal', 'toast', {
           'message': 'onrefresh'
         });
-        this.$call('timer', 'setTimeout', function() {
+        this.$call('timer', 'setTimeout', function () {
           self.refresh_display = 'hide';
         }, 3000);
       },
-      onloading: function(e) {
+      onloading: function (e) {
         var self = this;
         self.loading_display = 'show';
         self.$call('modal', 'toast', {
           'message': 'onloading'
         });
-        this.$call('timer', 'setTimeout', function() {
+        this.$call('timer', 'setTimeout', function () {
           if (self.sections.length <= 6) {
             self.sections.push(self.moreSections[self.sections.length - 2]);
           }
           self.loading_display = 'hide';
         }, 3000);
+      },
+      onScroll: function (e) {
+        var self = this;
+        this.event = 'contentOffset: ' + JSON.stringify(e.contentOffset) + '\ncontentSize: ' + JSON.stringify(e.contentSize);
+        dom.getComponentRect(this.$el('scroller'), function (ret) {
+          console.log(ret.size.height);
+          var listHeight = ret.size.height;
+          self.progress_width = (listHeight / e.contentSize.height) * 750;
+          var offsetY = e.contentOffset.y > 0 ? 0 : Math.abs(e.contentOffset.y);
+          self.progress = (offsetY / (e.contentSize.height - listHeight)) * (750 - self.progress_width);
+        });
       }
     },
     data: {
+      event: '-',
+      progress_width: 0,
+      progress:0,
       refresh_display: 'hide',
       loading_display: 'hide',
       sections: [

From ece44ec720f58a7b32c77e8bda7440ccd7514d74 Mon Sep 17 00:00:00 2001
From: "moxun.ljf" <furmint@foxmail.com>
Date: Mon, 27 Mar 2017 13:01:02 +0800
Subject: [PATCH 2/2] * [example] add slider scroll event demo

---
 examples/component/slider-tab.we | 100 +++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 examples/component/slider-tab.we

diff --git a/examples/component/slider-tab.we b/examples/component/slider-tab.we
new file mode 100644
index 0000000000..7a3bf8ab73
--- /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>
+