mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
21 KiB
JavaScript
2 lines
21 KiB
JavaScript
/*! For license information please see 9018.adfdaa96.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["9018"],{3214:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>List</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>A list component to show items and control loading status.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">List</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">List</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-list</span>\n <span class="hljs-attr">v-model:loading</span>=<span class="hljs-string">"loading"</span>\n <span class="hljs-attr">:finished</span>=<span class="hljs-string">"finished"</span>\n <span class="hljs-attr">finished-text</span>=<span class="hljs-string">"Finished"</span>\n @<span class="hljs-attr">load</span>=<span class="hljs-string">"onLoad"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in list"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"item"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-list</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> list = <span class="hljs-title function_">ref</span>([]);\n <span class="hljs-keyword">const</span> loading = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> finished = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onLoad</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">10</span>; i++) {\n list.<span class="hljs-property">value</span>.<span class="hljs-title function_">push</span>(list.<span class="hljs-property">value</span>.<span class="hljs-property">length</span> + <span class="hljs-number">1</span>);\n }\n loading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n\n <span class="hljs-keyword">if</span> (list.<span class="hljs-property">value</span>.<span class="hljs-property">length</span> >= <span class="hljs-number">40</span>) {\n finished.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;\n }\n }, <span class="hljs-number">1000</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n list,\n onLoad,\n loading,\n finished,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="error-info" tabindex="-1">Error Info</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-list</span>\n <span class="hljs-attr">v-model:loading</span>=<span class="hljs-string">"loading"</span>\n <span class="hljs-attr">v-model:error</span>=<span class="hljs-string">"error"</span>\n <span class="hljs-attr">error-text</span>=<span class="hljs-string">"Request failed. Click to reload"</span>\n @<span class="hljs-attr">load</span>=<span class="hljs-string">"onLoad"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in list"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"item"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-list</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> list = <span class="hljs-title function_">ref</span>([]);\n <span class="hljs-keyword">const</span> error = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> loading = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onLoad</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">fetchSomeThing</span>().<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =></span> {\n loading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n error.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;\n });\n };\n\n <span class="hljs-keyword">return</span> {\n list,\n error,\n onLoad,\n loading,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="pullrefresh" tabindex="-1">PullRefresh</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-pull-refresh</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"refreshing"</span> @<span class="hljs-attr">refresh</span>=<span class="hljs-string">"onRefresh"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-list</span>\n <span class="hljs-attr">v-model:loading</span>=<span class="hljs-string">"loading"</span>\n <span class="hljs-attr">:finished</span>=<span class="hljs-string">"finished"</span>\n <span class="hljs-attr">finished-text</span>=<span class="hljs-string">"Finished"</span>\n @<span class="hljs-attr">load</span>=<span class="hljs-string">"onLoad"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in list"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"item"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-list</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-pull-refresh</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> list = <span class="hljs-title function_">ref</span>([]);\n <span class="hljs-keyword">const</span> loading = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> finished = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> refreshing = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onLoad</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-keyword">if</span> (refreshing.<span class="hljs-property">value</span>) {\n list.<span class="hljs-property">value</span> = [];\n refreshing.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n }\n\n <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">10</span>; i++) {\n list.<span class="hljs-property">value</span>.<span class="hljs-title function_">push</span>(list.<span class="hljs-property">value</span>.<span class="hljs-property">length</span> + <span class="hljs-number">1</span>);\n }\n loading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n\n <span class="hljs-keyword">if</span> (list.<span class="hljs-property">value</span>.<span class="hljs-property">length</span> >= <span class="hljs-number">40</span>) {\n finished.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;\n }\n }, <span class="hljs-number">1000</span>);\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onRefresh</span> = (<span class="hljs-params"></span>) => {\n finished.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n loading.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;\n <span class="hljs-title function_">onLoad</span>();\n };\n\n <span class="hljs-keyword">return</span> {\n list,\n onLoad,\n loading,\n finished,\n onRefresh,\n refreshing,\n };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model:loading</td>\n<td>Whether to show loading info, the <code>load</code> event will not be Emitted when loading</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>v-model:error</td>\n<td>Whether loading is error, the <code>load</code> event will be Emitted only when error text clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>finished</td>\n<td>Whether loading is finished, the <code>load</code> event will not be Emitted when finished</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>offset</td>\n<td>The load event will be Emitted when the distance between the scrollbar and the bottom is less than offset</td>\n<td><em>number | string</em></td>\n<td><code>300</code></td>\n</tr>\n<tr>\n<td>loading-text</td>\n<td>Loading text</td>\n<td><em>string</em></td>\n<td><code>Loading...</code></td>\n</tr>\n<tr>\n<td>finished-text</td>\n<td>Finished text</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>error-text</td>\n<td>Error loaded text</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>immediate-check</td>\n<td>Whether to check loading position immediately after mounted</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable the load event</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Scroll direction, can be set to <code>up</code></td>\n<td><em>string</em></td>\n<td><code>down</code></td>\n</tr>\n<tr>\n<td>scroller <code>v4.6.4</code></td>\n<td>Specifies the node that needs to listen for scroll events, defaults to the nearest parent scroll node</td>\n<td><em>Element</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>load</td>\n<td>Emitted when the distance between the scrollbar and the bottom is less than offset</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Use <a href="https://vuejs.org/guide/essentials/template-refs.html" target="_blank">ref</a> to get List instance and call instance methods.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>check</td>\n<td>Check scroll position</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ListProps</span>, <span class="hljs-title class_">ListInstance</span>, <span class="hljs-title class_">ListDirection</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>ListInstance</code> is the type of component instance:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ListInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> listRef = ref<<span class="hljs-title class_">ListInstance</span>>();\n\nlistRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">check</span>();\n</code></pre>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>List content</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Custom loading tips</td>\n</tr>\n<tr>\n<td>finished</td>\n<td>Custom finished tips</td>\n</tr>\n<tr>\n<td>error</td>\n<td>Custom error tips</td>\n</tr>\n</tbody>\n</table>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-list-text-color</td>\n<td><em>var(--van-text-color-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-list-text-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-list-text-line-height</td>\n<td><em>50px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-list-loading-icon-size</td>\n<td><em>16px</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><h2 id="faq" tabindex="-1">FAQ</h2>\n<div class="van-doc-card"><h3 id="how-does-list-component-work" tabindex="-1">How does List component work?</h3>\n<p>List will listen to the scroll event of the browser and calculate the position. When the distance between the bottom of the list and the visible area is less than <code>offset</code>, the List component will trigger a <code>load</code> event.</p>\n</div><div class="van-doc-card"><h3 id="why-does-the-load-event-triggered-immediately-after-mounted" tabindex="-1">Why does the load event triggered immediately after mounted?</h3>\n<p>A load event will be triggered immediately to load the first screen data. This feature can be disabled by the <code>immediate-check</code> prop.</p>\n</div><div class="van-doc-card"><h3 id="why-does-the-load-event-triggered-continuously" tabindex="-1">Why does the load event triggered continuously?</h3>\n<p>If the amount of data loaded in one request is too small, the List will continue to trigger the <code>load</code> event until the content fills the screen or the data is fully loaded.</p>\n<p>Therefore, you need to adjust the amount of data per request. Ideally, the amount of data per request should be able to fill the height of one screen.</p>\n</div><div class="van-doc-card"><h3 id="what-is-the-meaning-of-loading-and-finished" tabindex="-1">What is the meaning of loading and finished?</h3>\n<p><code>List</code> has three states, understanding these states will help you use the component:</p>\n<ul>\n<li><code>loading = false</code>: Not in loading. The component will detect whether to trigger the <code>load</code> event according to the scroll position (if the content of the list is less than one screen, it will be triggered directly).</li>\n<li><code>loading = true</code>: During loading. Indicating that an request is being sent, and the <code>load</code> event will not be triggered.</li>\n<li><code>finished = true</code>: Loading is complete. No <code>load</code> will not be triggered.</li>\n</ul>\n<p>After each request, you need to manually set <code>loading</code> to <code>false</code>, indicating the end of loading.</p>\n</div><div class="van-doc-card"><h3 id="always-trigger-loading-after-using-float-layout" tabindex="-1">Always trigger loading after using float layout?</h3>\n<p>If you use the float layout on the content, you can add the <code>van-clearfix</code> class to the container to clear the float, so that the List can get the element position correctly.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-list</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-clearfix"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-item"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-item"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-item"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-list</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="always-trigger-loading-after-setting-overflow-on-html-and-body" tabindex="-1">Always trigger loading after setting overflow on html and body?</h3>\n<p>If the <code>overflow-x: hidden</code> style is set on the html and body tags, it will cause the List to always trigger loading.</p>\n<pre><code class="language-css"><span class="hljs-selector-tag">html</span>,\n<span class="hljs-selector-tag">body</span> {\n <span class="hljs-attribute">overflow-x</span>: hidden;\n}\n</code></pre>\n<p>The reason is that when an element is styled with <code>overflow-x: hidden</code>, the element\'s <code>overflow-y</code> will be set to <code>auto</code> by the browser, instead of the default value of <code>visible</code>, causing the List can not determine the scroll container correctly. The workaround is to remove this style, or add the <code>height: 100%</code> style to the html and body tags.</p>\n</div><div class="van-doc-card"><h3 id="always-trigger-loading-when-the-direction-prop-is-set-to-up" tabindex="-1">Always trigger loading when the direction prop is set to up?</h3>\n<p>Setting the <code>direction</code> prop to up will trigger the loading of the List component when the scrollbar is at the page top.</p>\n<p>When using this prop, it is recommended to scroll the scroll bar to the page bottom after each data request is completed.</p>\n</div>'},null,8,e))}}}]); |