<template>
    <docs-layout title="下拉刷新">
        <h2>概述</h2>
        <h3>移动端常见下拉刷新加载数据插件，考虑到移动设备的整体性能，不直接拖动整个列表。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {PullRefresh} from 'vue-ydui/dist/lib.rem/pullrefresh';<br />/* 使用px：import {PullRefresh} from 'vue-ydui/dist/lib.px/pullrefresh'; */<br /><br />Vue.component(PullRefresh.name, PullRefresh);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="调用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-pullrefresh :on-infinite="loadList"&gt;<br /><br />        &lt;yd-list theme="4"&gt;<br />            &lt;yd-list-item v-for="item in list"&gt;<br />                &lt;img slot="img" :src="item.img"&gt;<br />                &lt;span slot="title"&gt;{<span>{</span>item.title<span>}</span>}&lt;/span&gt;<br />                &lt;yd-list-other slot="other"&gt;<br />                    &lt;div&gt;<br />                        &lt;span class="list-price"&gt;&lt;em&gt;¥&lt;/em&gt;{<span>{</span>item.marketprice<span>}</span>}&lt;/span&gt;<br />                        &lt;span class="list-del-price"&gt;¥{<span>{</span>item.productprice<span>}</span>}&lt;/span&gt;<br />                    &lt;/div&gt;<br />                    &lt;div&gt;content&lt;/div&gt;<br />                &lt;/yd-list-other&gt;<br />            &lt;/yd-list-item&gt;<br />        &lt;/yd-list&gt;<br /><br />    &lt;/yd-pullrefresh&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                page: 1,<br />                list: [<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",<br />                        title: "标题标题标题标题标题",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    },<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",<br />                        title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    },<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",<br />                        title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    },<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",<br />                        title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    },<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",<br />                        title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    },<br />                    {<br />                        img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",<br />                        title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男",<br />                        marketprice: 56.23,<br />                        productprice: 89.36<br />                    }<br />                ]<br />            }<br />        },<br />        methods: {<br />            loadList() {<br />                const url = 'http://list.ydui.org/getdata.php';<br /><br />                this.$http.jsonp(url, {params: {type: 'pulldown', page: this.page}}).then((response) =&gt; {<br /><br />                    const _list = response.body;<br /><br />                    this.list = [..._list, ...this.list];<br /><br />                    this.$dialog.toast({<br />                        mes: _list.length &gt; 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'<br />                    });<br /><br />                    window.$yduiBus.$emit('ydui.pullrefresh.finishLoad');<br /><br />                    this.page++;<br />                });<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <a style="color:#F00;" target="_blank" href="http://vue.ydui.org/demo/#/list.pullrefresh">点击这里（切换成手机模式）查看效果</a>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-pullrefresh</span>组件上绑定<span>:on-infinite="loadList"</span>方法，当拖动列表达到一定位置后将会调用<span>loadList</span>方法，从而获取最新的数据；</p>
                    <p>
                        需要手动调用的方法（目的通知组件做出相应处理）：<br/>
                        单次请求数据加载完毕后：<span>window.$yduiBus.$emit('ydui.pullrefresh.finishLoad');</span>
                    </p>
                    <p style="color:#F00;">注意：原 <span>this.$yduiBus.$emit()</span> 已改为 <span>window.$yduiBus.$emit()</span>。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-pullrefresh</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>列表内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-pullrefresh</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>on-infinite</td>
                <td>当拖动列表达到一定位置后将会调用该自定义方法</td>
                <td>Function</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>
