| 1 |
- import{c as t,f as n,t as e,C as d,o as r}from"./vendor.ed841bd5.js";const o={class:"markdown-body"},l=n("h1",null,"Pullrefresh组件",-1),s=n("h3",null,"介绍",-1),a=n("p",null,"纵向可支持下拉刷新和上拉加载，横向可支持左滑更新、右滑加载更多",-1),i=n("h3",null,"安装",-1),h=n("pre",null,[n("code",{class:"language-javascript"},"import { createApp } from 'vue';\nimport { PullRefresh } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(PullRefresh);\n")],-1),u=n("h2",null,"代码演示",-1),c=n("h3",null,"纵向",-1),p={class:"language-html"},f=n("pre",null,[n("code",{class:"language-javascript"},"setup() {\n const refresh = done => {\n console.log('上拉加载')\n setTimeout(() => {\n done();\n }, 1000);\n };\n\n const downRefresh = done => {\n console.log('下拉刷新')\n setTimeout(() => {\n done();\n }, 1000);\n }\n return { refresh, downRefresh };\n}\n")],-1),v=n("h3",null,"横向",-1),g={class:"language-html"},m=d('<pre><code class="language-javascript">setup() {\n const refresh = done => {\n console.log('上拉加载')\n setTimeout(() => {\n done();\n }, 1000);\n };\n\n const downRefresh = done => {\n console.log('下拉刷新')\n setTimeout(() => {\n done();\n }, 1000);\n }\n return { refresh, downRefresh };\n}\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>useWindow</td><td>将滚动侦听器添加到 window 否则侦听组件的父节点</td><td>Boolean</td><td>true</td></tr><tr><td>containerId</td><td>在 useWindow 属性为 false 的时候，自定义设置节点ID</td><td>String</td><td>‘’</td></tr><tr><td>disabled</td><td>组件是否激活</td><td>Boolean</td><td>true</td></tr><tr><td>direction</td><td>滚动的方向，‘vertical’ 纵向、‘horizontal’ 横向</td><td>String</td><td>‘vertical’</td></tr><tr><td>pullingText</td><td>'下拉’文案</td><td>Object</td><td>{top: ‘下拉刷新’, bottom: ‘上拉加载’,left: ‘左滑刷新’, right: ‘右滑加载’}</td></tr><tr><td>loosingText</td><td>'释放’文案</td><td>Object</td><td>{top: ’松手释放刷新’, bottom: ‘松手释放刷新’,left: ‘释放刷新’, right: ‘加载更多’}</td></tr><tr><td>loadingText</td><td>'加载中’文案</td><td>Object</td><td>{top: ‘加载中…’, bottom: ‘加载中…’,left: ‘加载中…’, right: ‘加载中…’}</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>refresh</td><td>纵向-上拉加载、横向-右滑加载更多时触发</td><td>done() 函数，在数据更新完成以后，需要调用 done() 函数将组件状态初始化</td></tr><tr><td>downRefresh</td><td>纵向-下拉刷新、横向-左滑刷新时触发</td><td>done() 函数，在数据更新完成以后，需要调用 done() 函数将组件状态初始化</td></tr></tbody></table>',6),b={expose:[],setup:d=>(d,b)=>(r(),t("div",o,[l,s,a,i,h,u,c,n("pre",null,[n("code",p,'<div class="vertical">\n <nut-pullrefresh\n @refresh="refresh"\n @down-refresh="downRefresh"\n :useWindow="false"\n containerId="pull"\n >\n <div class="content" id="pull">\n <div class="main">\n <div\n class="text-data"\n v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"\n :key="item"\n >我是测试数据 '+e(d.item)+"</div>\n </div>\n </div>\n </nut-pullrefresh>\n</div>\n",1)]),f,v,n("pre",null,[n("code",g,'<div class="horizontal">\n <nut-pullrefresh\n @refresh="refresh"\n @down-refresh="downRefresh"\n :useWindow="false"\n containerId="pullH"\n direction="horizontal"\n >\n <div class="contentH" id="pullH">\n <div class="mainH">\n <div\n class="text-data"\n v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"\n :key="item"\n >我是测试数据 '+e(d.item)+"</div\n >\n </div>\n </div>\n </nut-pullrefresh>\n</div>\n",1)]),m]))};export default b;
|
