vue-slim-better-scroll
Version:
💇 开箱即用的/渐进式的 vue 移动端滚动组件
55 lines (51 loc) • 25.6 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>vue-slim-better-scroll | vue-slim-better-scroll</title>
<meta name="description" content="开箱即用的/渐进式的 vue移动端滚动组件/插件，基于[better-scroll](https://github.com/ustbhuangyi/better-scroll)">
<link rel="preload" href="/vue-slim-better-scroll/docs/dist/assets/css/1.styles.cbe77d76.css" as="style"><link rel="preload" href="/vue-slim-better-scroll/docs/dist/assets/js/app.5b29a1be.js" as="script"><link rel="preload" href="/vue-slim-better-scroll/docs/dist/assets/js/0.e33e9d77.js" as="script">
<link rel="stylesheet" href="/vue-slim-better-scroll/docs/dist/assets/css/1.styles.cbe77d76.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/vue-slim-better-scroll/docs/dist/" class="home-link router-link-exact-active router-link-active"><!----><span class="site-name">
vue-slim-better-scroll
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-slim-better-scroll/docs/dist/" class="nav-link router-link-exact-active router-link-active">指南</a></div><div class="nav-item"><a href="https://github.com/komomoo/vue-slim-better-scroll" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><!----></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-slim-better-scroll/docs/dist/" class="nav-link router-link-exact-active router-link-active">指南</a></div><div class="nav-item"><a href="https://github.com/komomoo/vue-slim-better-scroll" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><!----></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>vue-slim-better-scroll</span><!----></p><ul class="sidebar-group-items"><li><a href="/vue-slim-better-scroll/docs/dist/#✨-特性" class="sidebar-link">✨ 特性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-slim-better-scroll/docs/dist/#🐠-示例" class="sidebar-link">🐠 示例</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-slim-better-scroll/docs/dist/#🚀-快速开始" class="sidebar-link">🚀 快速开始</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-slim-better-scroll/docs/dist/#🔌-api文档" class="sidebar-link">🔌 API文档</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-slim-better-scroll/docs/dist/#props" class="sidebar-link">Props</a></li><li class="sidebar-sub-header"><a href="/vue-slim-better-scroll/docs/dist/#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/vue-slim-better-scroll/docs/dist/#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/vue-slim-better-scroll/docs/dist/#slots" class="sidebar-link">Slots</a></li></ul></li><li><a href="/vue-slim-better-scroll/docs/dist/#⚠️-常见问题" class="sidebar-link">⚠️ 常见问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-slim-better-scroll/docs/dist/#为什么无法滚动？" class="sidebar-link">为什么无法滚动？</a></li></ul></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="vue-slim-better-scroll"><a href="#vue-slim-better-scroll" aria-hidden="true" class="header-anchor">#</a> vue-slim-better-scroll</h1><blockquote><p>开箱即用的/渐进式的 vue移动端滚动组件/插件，基于<a href="https://github.com/ustbhuangyi/better-scroll" target="_blank" rel="noopener noreferrer">better-scroll<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote><h2 id="✨-特性"><a href="#✨-特性" aria-hidden="true" class="header-anchor">#</a> ✨ 特性</h2><ul><li><strong>极简使用</strong><ul><li>零配置/渐进式配置</li><li>自动刷新滚动高度</li></ul></li><li><strong>更优性能</strong><ul><li>使用 transform 替代 position ，下拉刷新不再掉帧</li></ul></li><li><strong>更好体验</strong><ul><li>滚动内容小于滚动视口时，也可以滚动/回弹/下拉刷新/上拉加载</li><li>多次下拉刷新节流</li><li>多处细节改进</li></ul></li><li><strong>更小体积</strong><ul><li>v1.5.0+ 使用 <a href="https://github.com/komomoo/dio" target="_blank" rel="noopener noreferrer">dio<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 构建，仅 25k (旧版本为 webpack 构建，体积 47k)</li><li>v1.6.0+ 抛弃 gif，使用 css 重构 Loading。体积近一步减小，仅 21k</li></ul></li></ul><h2 id="🐠-示例"><a href="#🐠-示例" aria-hidden="true" class="header-anchor">#</a> 🐠 示例</h2><img src="/vue-slim-better-scroll/docs/dist/assets/img/demo.8ae480da.gif" width="320" style="margin-top: 20px;"><p><a href="https://komomoo.github.io/vue-slim-better-scroll/demo/default/dist/" target="_blank" rel="noopener noreferrer">Demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/default/App.vue" target="_blank" rel="noopener noreferrer">Demo 源码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://komomoo.github.io/vue-slim-better-scroll/demo/complex/dist/" target="_blank" rel="noopener noreferrer">Demo2: 结合 vue-router<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/complex/" target="_blank" rel="noopener noreferrer">Demo2 源码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="🚀-快速开始"><a href="#🚀-快速开始" aria-hidden="true" class="header-anchor">#</a> 🚀 快速开始</h2><ol><li>安装</li></ol><div class="language-bash extra-class"><pre class="language-bash"><code>yarn add vue-slim-better-scroll <span class="token comment"># 或 npm i -S vue-slim-better-scroll</span>
</code></pre></div><ol start="2"><li>引入</li></ol><ul><li>插件形式全局引入</li></ul><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 入口文件 main.js 中</span>
<span class="token keyword">import</span> Scroll <span class="token keyword">from</span> <span class="token string">'vue-slim-better-scroll'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Scroll<span class="token punctuation">)</span>
</code></pre></div><ul><li>组件形式引入</li></ul><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// *.vue 中</span>
<span class="token keyword">import</span> Scroll <span class="token keyword">from</span> <span class="token string">'vue-slim-better-scroll'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token comment">/* ... */</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
Scroll<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>使用它，请参考<a href="https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/default/App.vue" target="_blank" rel="noopener noreferrer">Demo 源码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment"><!-- 简单场景 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Scroll</span>
<span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scroll<span class="token punctuation">"</span></span>
<span class="token attr-name">:autoUpdate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span>
<span class="token attr-name">@pullingDown</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadRefresh<span class="token punctuation">"</span></span>
<span class="token attr-name">@pullingUp</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadMore<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 滚动的内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Scroll</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 复杂场景 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Scroll</span>
<span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scroll<span class="token punctuation">"</span></span>
<span class="token attr-name">:updateData</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[data]<span class="token punctuation">"</span></span>
<span class="token attr-name">:refreshData</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[]<span class="token punctuation">"</span></span>
<span class="token attr-name">@pullingDown</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadRefresh<span class="token punctuation">"</span></span>
<span class="token attr-name">@pullingUp</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadMore<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 滚动的内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Scroll</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="🔌-api文档"><a href="#🔌-api文档" aria-hidden="true" class="header-anchor">#</a> 🔌 API文档</h2><h3 id="props"><a href="#props" aria-hidden="true" class="header-anchor">#</a> Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>probeType</td><td>派发scroll事件的条件</td><td>Number</td><td>1</td></tr><tr><td>listenScroll</td><td>是否监听滚动，开启后才能派发scroll事件</td><td>Boolean</td><td>false</td></tr><tr><td>listenBeforeScrollStart</td><td>是否监听滚动之前，开启后才能派发beforeScrollStart事件</td><td>Boolean</td><td>false</td></tr><tr><td>scrollX</td><td>开启X轴滚动</td><td>Boolean</td><td>false</td></tr><tr><td>scrollY</td><td>开启Y轴滚动</td><td>Boolean</td><td>true</td></tr><tr><td>scrollbar</td><td>开启滚动条</td><td>Boolean or Object</td><td>false</td></tr><tr><td>pullDown</td><td>启用下拉刷新</td><td>Boolean</td><td>true</td></tr><tr><td>pullDownConfig</td><td>下拉刷新配置</td><td>Object</td><td>{ <br> threshold: 90, // 触发 pullingDown 的距离 <br> stop: 40, // pullingDown 正在刷新 hold 时的距离 <br> txt: '刷新成功', <br> }</td></tr><tr><td>pullUp</td><td>启用上拉加载</td><td>Boolean</td><td>true</td></tr><tr><td>pullUpConfig</td><td>上拉加载配置</td><td>Object</td><td>{ <br> threshold: 100, // 提前触发 pullingUp 的距离 <br> txt: { more: '上拉加载', noMore: '— 我是有底线的 —' <br> }</td></tr><tr><td>startY</td><td>纵轴方向初始化位置</td><td>Number</td><td>0</td></tr><tr><td>bounce</td><td>回弹效果</td><td>Boolean</td><td>true</td></tr><tr><td>bounceTime</td><td>回弹时间</td><td>Number</td><td>600</td></tr><tr><td>preventDefaultException</td><td><a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#preventdefaultexception" target="_blank" rel="noopener noreferrer">不阻止默认行为<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td><td>Object</td><td>{ <br> tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ <br> }</td></tr><tr><td>mouseWheel</td><td>v1.6.2+，<a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#mousewheelv180" target="_blank" rel="noopener noreferrer">启用 PC 鼠标滚轮<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td><td>Boolean</td><td>false</td></tr><tr><td>betterScrollOptions</td><td>v1.7.0+，任何的 <a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html" target="_blank" rel="noopener noreferrer">better-scroll 配置项<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，将合并在初始化 better-scroll 的配置中。注意：与 props 冲突的配置项将被 props 覆盖</td><td>Object</td><td>null</td></tr><tr><td>autoUpdate</td><td>自动更新高度。深监视 this.$parent.$data 自动调用 update()，适用于简单场景。复杂场景请使用updateData/refreshData 或手动调用 update()/refresh()</td><td>Boolean</td><td>false</td></tr><tr><td>updateData</td><td>引起更新上拉/下拉加载状态的数据（下拉刷新/上拉加载相关的数据）。设置此项时，autoUpdate 应设置为 false。当观测到该数据变化时，将自动调用 update()</td><td>Array</td><td>null</td></tr><tr><td>refreshData</td><td>引起刷新高度的数据（不包含 updateData 内的数据）。当观测到该数据变化时，将自动调用 refresh() 刷新滚动高度</td><td>Array</td><td>null</td></tr></tbody></table><h3 id="methods"><a href="#methods" aria-hidden="true" class="header-anchor">#</a> Methods</h3><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>initScroll</td><td>初始化scroll组件</td><td></td></tr><tr><td>disable</td><td>禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应</td><td></td></tr><tr><td>enable</td><td>启用 better-scroll, 默认 开启</td><td></td></tr><tr><td>scrollTo</td><td>滚动到指定的位置</td><td>(x:Number, y:Number, time:Number) <br> 1.x横轴坐标(px)，默认值0 <br> 2.y 纵轴坐标(px)，默认值0 <br> 3.滚动动画执行的时长(ms)，默认值=$props.bounceTime=600</td></tr><tr><td>scrollToElement</td><td>滚动到指定的目标元素</td><td>(el, time, offsetX , offsetY )接收4个参数 详情请查看: <a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api.html#scrolltoelementel-time-offsetx-offsety-easing" target="_blank" rel="noopener noreferrer">scrollToElement<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td></tr><tr><td>scrollToTop</td><td>v1.4.0+，滚动到顶部</td><td></td></tr><tr><td>scrollToBottom</td><td>v1.4.0+，滚动到底部</td><td></td></tr><tr><td>autoPullDownRefresh</td><td>v1.5.0+，手动触发下拉刷新</td><td></td></tr><tr><td>destroy</td><td>销毁 better-scroll，解绑事件</td><td></td></tr><tr><td>refresh</td><td>刷新滚动高度（当页面无法滚动时，可尝试调用此方法）</td><td></td></tr><tr><td>update</td><td>更新加载状态，下拉/上拉成功后使用。当上拉加载到最后一页/需要触发停止上拉加载时，需要手动调用它</td><td>(pullUpFinally:Boolean) 声明 pullUp 上拉加载是否到了最底部。下拉刷新成功后该值会自动 false。也可传入 false 手动声明不是最后一页</td></tr></tbody></table><h3 id="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>scroll</td><td>触发时机：滚动过程中，具体时机取决于选项中的 probeType (触发事件在参数中需要开启 <strong>listenScroll</strong>，该参数默认为 false )</td><td>(pos:Object) 滚动的实时坐标</td></tr><tr><td>beforeScrollStart</td><td>触发时机：滚动开始之前 (触发事件在参数中需要开启 <strong>listenBeforeScrollStart</strong>，该参数默认为 false )</td><td></td></tr><tr><td>pullingDown</td><td>触发时机：在一次下拉刷新的动作后，这个时机一般用来去后端刷新数据。(触发事件在参数中需要开启 <strong>pullDown</strong>，该参数默认为 true )</td><td></td></tr><tr><td>pullingUp</td><td>触发时机：在一次上拉加载的动作后，这个时机一般用来去后端请求数据。(触发事件在参数中需要开启 <strong>pullUp</strong>，该参数默认为 true )</td><td></td></tr></tbody></table><h3 id="slots"><a href="#slots" aria-hidden="true" class="header-anchor">#</a> Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>滚动的主体内容区域</td></tr><tr><td>pulldown</td><td>下拉刷新的内容</td></tr><tr><td>pullup</td><td>上拉加载的内容</td></tr></tbody></table><h2 id="⚠️-常见问题"><a href="#⚠️-常见问题" aria-hidden="true" class="header-anchor">#</a> ⚠️ 常见问题</h2><h3 id="为什么无法滚动？"><a href="#为什么无法滚动？" aria-hidden="true" class="header-anchor">#</a> 为什么无法滚动？</h3><p>父容器需要指定一个高度。</p><p>如果想要高度自适应，父容器的高度可采用 <code>100%</code>、<code>vh</code>、<code>calc()</code>、<code>flex(1)</code> 等多种自适应方案。</p><p>原因可参考 <a href="https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#%E6%BB%9A%E5%8A%A8%E5%8E%9F%E7%90%86" target="_blank" rel="noopener noreferrer">better-scroll 滚动原理<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p><hr><p>😉😘 如果它对你有所帮助，可以点一下 <b>⭐️<a href="https://github.com/komomoo/vue-slim-better-scroll">Star</a></b> ~</p><p><strong>🌟 <a href="https://github.com/komomoo/vue-slim-better-scroll" target="_blank" rel="noopener noreferrer">Star me !<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div><div class="content edit-link"><!----><!----></div><!----></div></div></div>
<script src="/vue-slim-better-scroll/docs/dist/assets/js/0.e33e9d77.js" defer></script><script src="/vue-slim-better-scroll/docs/dist/assets/js/app.5b29a1be.js" defer></script>
</body>
</html>