更改pullrefresh 结束回调模式同时支持callback和promise

.babelrc

@@ -1,5 +1,6 @@
 {
  "presets": [
- ["es2015"]
- ]
+ ["env","stage-2"]
+ ],
+ "plugins": ["transform-runtime"]
 }

example/main.js

@@ -49,6 +49,7 @@ import CheckList from './routers/checklist.vue';
 import Search from './routers/search.vue';
 import ScrollNav from './routers/scrollnav.vue';
 import Preview from './routers/preview.vue';
+import PullRefresh from './routers/pullRefresh.vue';
 
 import App from './app.vue';
 
@@ -107,6 +108,7 @@ const router = new VueRouter({
  {path: '/search', name: 'search', component: Search},
  {path: '/scrollnav', name: 'scrollnav', component: ScrollNav},
  {path: '/preview', name: 'preview', component: Preview},
+ {path: '/pullRefresh', name: 'pullRefresh', component: PullRefresh},
  ]
 });
 

example/routers/index.vue

@@ -52,6 +52,7 @@
  {icon: 'demo-icons-scrollnav', name: 'ScrollNav', link: '/scrollnav'},
  {icon: 'demo-icons-scrolltab', name: 'ScrollTab', link: '/scrolltab'},
  {icon: 'demo-icons-preview', name: 'Preview', link: '/preview'},
+ {icon: 'demo-icons-preview', name: 'PullRefresh', link: '/pullRefresh'},
  ]
  }
  }

example/routers/pullRefresh.vue

@@ -0,0 +1,134 @@
+<template>
+ <yd-pullrefresh :callback="type==0?loadListCallback:loadList" ref="pullrefreshDemo">
+
+ <yd-list theme="4">
+ <yd-list-item v-for="item, key in list" :key="key">
+ <img slot="img" :src="item.img">
+ <span slot="title">{{item.title}}</span>
+ <yd-list-other slot="other">
+ <div>
+ <span class="list-price"><em>¥</em>{{item.marketprice}}</span>
+ <span class="list-del-price">¥{{item.productprice}}</span>
+ </div>
+ <div>content</div>
+ </yd-list-other>
+ </yd-list-item>
+ </yd-list>
+ <div class="tab-btn">
+ <button :class='{active:type==1}' @click="typeChange(1)">Promise</button>
+ <button :class='{active:type==0}' @click="typeChange(0)">Callback</button>
+ </div>
+ </yd-pullrefresh>
+</template>
+<style>
+ .tab-btn{
+ position: fixed;
+ bottom: 10px;
+ right:10px;
+ z-index: 100;
+ }
+ .tab-btn>button{
+ padding: 10px 15px;
+ border: none;
+ background-color:#7cc9ff ;
+ color:#ffffff;
+ box-shadow:0 0 5px 2px #B7D0E1;
+ }
+ .tab-btn>button.active{
+ background-color: #e95a4e;
+ }
+</style>
+<script type="text/babel">
+ export default {
+ data() {
+ return {
+ type:0,
+ page: 1,
+ list: []
+ }
+ },
+ mounted(){
+ this.init();
+ },
+ methods: {
+ init(){
+ this.$set(this,'page',1);
+ this.$set(this,'list',[
+ {
+ img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
+ title: "标题标题标题标题标题",
+ marketprice: 56.23,
+ productprice: 89.36
+ },
+ {
+ img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
+ title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫",
+ marketprice: 56.23,
+ productprice: 89.36
+ },
+ {
+ img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
+ title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖",
+ marketprice: 56.23,
+ productprice: 89.36
+ },
+ {
+ img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
+ title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫",
+ marketprice: 56.23,
+ productprice: 89.36
+ },
+ {
+ img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
+ title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服",
+ marketprice: 56.23,
+ productprice: 89.36
+ },
+ {
+ img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
+ title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男",
+ marketprice: 56.23,
+ productprice: 89.36
+ }
+ ])
+ },
+ typeChange(type){
+ this.init();
+ this.$set(this,'type',type);
+ },
+ async loadList() {
+ const url = 'http://list.ydui.org/getdata.php';
+ console.log(this.page);
+ let response = await this.$http.jsonp(url, {params: {type: 'pulldown', page: this.page}});
+ const _list = response.body;
+
+ this.list = [..._list, ...this.list];
+
+ this.$dialog.toast({
+ mes: _list.length > 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'
+ });
+
+ this.page++;
+
+ return true
+ },
+ loadListCallback() {
+ const url = 'http://list.ydui.org/getdata.php';
+ console.log(this.page);
+ this.$http.jsonp(url, {params: {type: 'pulldown', page: this.page}}).then((response)=>{
+ const _list = response.body;
+
+ this.list = [..._list, ...this.list];
+
+ this.$dialog.toast({
+ mes: _list.length > 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'
+ });
+
+ this.page++;
+
+ this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
+ });
+ }
+ }
+ }
+</script>

package.json

@@ -39,7 +39,10 @@
  "autoprefixer": "^6.6.1",
  "babel-core": "^6.21.0",
  "babel-loader": "^6.2.10",
+ "babel-plugin-transform-runtime": "^6.23.0",
+ "babel-preset-env": "^1.7.0",
  "babel-preset-es2015": "^6.18.0",
+ "babel-preset-stage-2": "^6.24.1",
  "css-loader": "^0.26.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.10.1",

src/components/pullrefresh/src/pullrefresh.vue

@@ -218,9 +218,15 @@
 
  this.resetParams();
  },
- triggerLoad() {
+ async triggerLoad() {
  this.touches.loading = true;
- this.callback && this.callback();
+ var fn = this.callback&&this.callback();
+ if(fn&&fn.then&&typeof fn.then =='function'){
+ let ser = await fn;
+ if(ser){
+ this.resetParams();
+ }
+ }
  },
  resetParams() {
  this.dragTip.translate = 0;