Added containerSelector property.

README.md

@@ -70,7 +70,7 @@ new Vue({
 | Property | Description |
 |:--|:--|
 | onRefresh | refresh event;Should return a promise. |
-| config | {<br>errorLabel: label shows when error<br>startLabel: label shows when pull down start<br>readyLabel: label shows when ready to refresh<br>loadingLabel: label shows when loading<br>pullDownHeight: the height toggle pull down refresh action<br>} |
+| config | {<br>errorLabel: label shows when error<br>startLabel: label shows when pull down start<br>readyLabel: label shows when ready to refresh<br>loadingLabel: label shows when loading<br>pullDownHeight: the height toggle pull down refresh action<br>containerSelector: selector of the container where the element is used, useful for pages where the list is embedded somewhere and the top of the list does not match the top of the screen<br>} |
 
 ## Contribution
 First, install dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pull-refresh",
-  "version": "0.2.7",
+  "version": "0.4.0",
   "description": "a pull down refresh component implements by vuejs",
   "main": "./dist/vue-pull-refresh.min.js",
   "scripts": {
@@ -50,7 +50,7 @@
     "karma-spec-reporter": "0.0.26",
     "karma-verbose-reporter": "0.0.3",
     "karma-webpack": "^1.8.0",
-    "node-sass": "^3.4.2",
+    "node-sass": "^4.14.1",
     "phantomjs": "^2.1.7",
     "postcss-cssnext": "^2.8.0",
     "postcss-loader": "^1.1.1",

src/vue-pull-refresh.vue

@@ -1,11 +1,13 @@
 <template>
     <div class="pull-down-container">
-        <div class="pull-down-header" v-bind:style="{'height': pullDown.height + 'px'}">
-            <div class="pull-down-content" :style="pullDownContentStyle">
-                <i class="pull-down-content--icon" v-bind:class="iconClass"></i>
-                <span class="pull-down-content--label">{{label}}</span>
+        <slot name="pull-down", :header-style="pullDownHeaderStyle", :content-style="pullDownContentStyle", :label="label">
+            <div class="pull-down-header" :style="pullDownHeaderStyle">
+                <div class="pull-down-content" :style="pullDownContentStyle">
+                    <i class="pull-down-content--icon" :class="iconClass"></i>
+                    <span class="pull-down-content--label">{{label}}</span>
+                </div>
             </div>
-        </div>
+        </slot>
         <slot></slot>
     </div>
 </template>
@@ -43,6 +45,13 @@
             };
         },
         computed: {
+            slotProps() {
+                return {
+                    label: this.label,
+                    headerStyle: this.pullDownHeaderStyle,
+                    contentStyle: this.pullDownContentStyle
+                };
+            },
             label() {
                 // label of pull down
                 if (this.pullDown.status === STATUS_ERROR) {
@@ -66,15 +75,23 @@
                 }
                 return '';
             },
+            pullDownHeaderStyle() {
+                return {
+                    height: `${this.pullDown.height}px`
+                };
+            },
             pullDownContentStyle() {
+                const height = (this.config.pullDownHeight - 40) / 2;
+
                 return {
-                    bottom: (this.config.pullDownHeight - 40) / 2 + 'px'
+                    bottom: `${height}px`
                 };
             }
         },
         mounted() {
             this.$nextTick(() => {
                 var el = this.$el;
+                var container = document.querySelector(this.config.containerSelector) || el;
                 var pullDownHeader = el.querySelector('.pull-down-header');
                 var icon = pullDownHeader.querySelector('.pull-down-content--icon');
                 // set default pullDownHeight
@@ -112,7 +129,7 @@
 
                 // bind touchstart event to store start position of touch
                 el.addEventListener('touchstart', e => {
-                    if (el.scrollTop === 0) {
+                    if (container.scrollTop === 0) {
                         this.canPull = true;
                     } else {
                         this.canPull = false;