### Install Sass

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Install Sass as a development dependency, as uni-ui-plus relies on it for its styling.

```bash
pnpm add sass -D
```

--------------------------------

### Install uni-ui-plus with npm

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Choose one of the following commands to add uni-ui-plus to your project using your preferred package manager.

```bash
pnpm add uni-ui-plus
```

```bash
yarn add uni-ui-plus
```

```bash
npm i uni-ui-plus
```

--------------------------------

### Configure easycom for Automatic Component Import

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Configure easycom in pages.json to automatically scan and import uni-ui-plus components. This is the recommended approach when using the uni_modules installation.

```json
// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^up-(.*)": "uni-ui-plus/components/up-$1/up-$1.vue"
    }
  }
}

```

--------------------------------

### Swiper-Nav with Line Type

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Example of using the 'line' type for Swiper-Nav, suitable for progress indication like in short video scenarios.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="line"
/>
```

--------------------------------

### Basic List Usage with Data Binding

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/list.md

Demonstrates the fundamental setup for the uni-ui-plus List component. It uses `v-model:list-obj` for two-way data binding and integrates with `vue-hooks-pure` for data fetching, including pull-to-refresh and load-more functionalities. The `useRequest` hook is configured to handle API responses and extract list data.

```vue
<script setup>
import { onMounted } from 'vue'
import { getObjVal, list, sleep } from '@iceywu/utils'
import { useRequest } from 'vue-hooks-pure'
// 模拟api
async function getTestApi(params) {
  await sleep(500)
  const { page = 0, size = 10, maxPage = 3 } = params
  const baseSize = page * size
  const data = list(0, size - 1, (index) => {
    const element = baseSize + index
    return {
      id: element,
      cover: `https://picsum.photos/id/${element}/200/300`,
      title: `title ${element}`,
      desc: `desc ${element}`
    }
  })
  return {
    code: 200,
    msg: '查询成功',
    result: {
      content: data,
      last: page + 1 === maxPage,
      total: 100
    }
  }
}

const {
  onRefresh,
  onLoad: onLoadMore,
  result
} = useRequest(getTestApi, {
  target: 'list',
  loadingDelay: 300,
  getVal: (res) => {
    const list = getObjVal(res, 'result.content', [])
    return list
  },
    listOptions: {
      defaultPageKey: 'page',
      defaultSizeKey: 'size',
      defaultDataKey: 'list',
      defaultPage: -1,
      getTotal: (data) => {
        const total = getObjVal(data, 'result.total', 0)
        return total
      }
    }
})
onMounted(() => {
  onRefresh()
})
</script>

<template>
  <view class="h-50vh">
    <up-list
      v-model:list-obj="result"
      :scroll-view-props="{
        refresherEnabled: true,
        scrollY: true
      }"
      @on-load="onLoadMore"
      @on-refresh="onRefresh"
    >
      <template #default="{ data: { list } }">
        <view v-for="(item, index) in list" :key="index" class="mb-4 flex">
          <image :src="item.cover" class="h-20 w-20" mode="widthFix" />
          <view>{{ item.title }}</view>
        </view>
      </template>
    </up-list>
  </view>
</template>
```

--------------------------------

### Swiper-Nav with Dots Type

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Example of using the 'dots' type for the Swiper-Nav indicator.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="dots"
/>
```

--------------------------------

### Swiper-Nav with Dots-Bar Type

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Example of using the 'dots-bar' type for the Swiper-Nav indicator.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="dots-bar"
/>
```

--------------------------------

### Swiper-Nav with Custom Indicator Position

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Shows how to position the Swiper-Nav indicator using the 'indicator-position' attribute. This example places it in the top-right corner.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="dots"
  indicator-position="top-right"
/>
```

--------------------------------

### Custom Swiper Content

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Uses slots to customize the content displayed within each slide of the Swiper. This example shows how to use item data and index to style custom content.

```html
<up-swiper :list="customList" :height="160" :indicator="true" :autoplay="false">
  <template #default="{ item, index }">
    <view class="custom-item">
      <view class="custom-content" :style="{ background: item.color }">
        <text class="custom-title">{{ item.title }}</text>
        <text class="custom-desc">{{ item.description }}</text>
        <view class="custom-index">{{ index + 1 }}</view>
      </view>
    </view>
  </template>
</up-swiper>
```

--------------------------------

### Basic Usage of uni-ui-plus Components

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

After configuration, you can directly use uni-ui-plus components in your Single File Components (SFCs).

```html
<template>
  <up-image src="https://example.com/a.jpg" width="100" height="100" />
  <up-empty description="暂无数据" />
</template>

```

--------------------------------

### Basic Empty State

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/empty.md

Demonstrates the simplest usage of the Empty component, displaying the default empty state image and description.

```vue
<template>
  <up-empty description="无数据" />
</template>
```

--------------------------------

### Image Preview with Custom Source

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Specify a different image source for preview using the `preview-src` attribute, while `src` displays the initial image.

```vue
<up-image
  src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg"
  preview-src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example2.jpg"
  width="100"
  height="100"
  :enable-preview="true"
/>
```

--------------------------------

### Basic Usage of Swiper-Nav

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Demonstrates the basic standalone usage of the Swiper-Nav component to display the current position.

```html
<up-swiper-nav
  :current="currentIndex"
  :total="5"
  type="dots"
/>
```

--------------------------------

### Image Preview

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Enable image preview by clicking using the `enable-preview` attribute. This internally calls `uni.previewImage`.

```vue
<up-image
  src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg"
  width="100"
  height="100"
  :enable-preview="true"
/>
```

--------------------------------

### Configure Vite for Automatic Component Import

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Set up a custom resolver in Vite to automatically import uni-ui-plus components. This is an alternative to the easycom configuration.

```typescript
// src/resolvers/up-resolver.ts
import type { ComponentResolver } from '@uni-helper/vite-plugin-uni-components'
import { kebabCase } from '@uni-helper/vite-plugin-uni-components'

export function UpResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^Up[A-Z]/)) {
        const compName = kebabCase(name)
        return {
          name,
          from: `uni-ui-plus/components/${compName}/${compName}.vue`,
        }
      }
    },
  }
}

```

```typescript
// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Components from '@uni-helper/vite-plugin-uni-components'
import { UpResolver } from '@/resolvers/up-resolver'

export default defineConfig({
  plugins: [
    Components({ resolvers: [UpResolver()] }),
    uni()
  ],
});

```

--------------------------------

### Custom Image URL

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/empty.md

Illustrates how to use a custom image by providing a URL to the `image` prop.

```vue
<template>
  <up-empty
    description="描述文字"
    image="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg"
  />
</template>
```

--------------------------------

### Different Image Types

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/empty.md

Shows how to switch between different built-in empty state image types ('empty', 'error', 'network') or use custom image URLs.

```vue
<template>
  <up-empty image="empty" description="无内容" />
  <up-empty image="error" description="加载失败/错误" />
  <up-empty image="network" description="无网络" />
</template>
```

--------------------------------

### Swiper-Nav with Fraction Type

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Demonstrates the 'fraction' type for Swiper-Nav, displaying the current item as a fraction of the total.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="fraction"
/>
```

--------------------------------

### Basic Skeleton Usage

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/skeleton.md

The simplest way to use the Skeleton component. This will display a default title-like skeleton.

```vue
<template>
  <up-skeleton />
</template>
```

--------------------------------

### Enable Virtual List

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/list.md

This snippet demonstrates how to enable and configure the virtual list feature for large data rendering. It requires setting `virtual-list-props.enabled` to true and defining `itemHeight` and `containerHeight`.

```vue
<script setup>
import { ref, onMounted } from 'vue'
import { list } from '@iceywu/utils'

const virtualListObj = ref({
  loading: false,
  finished: false,
  refreshing: false,
  list: []
})

onMounted(() => {
  // 生成虚拟列表数据
  virtualListObj.value.list = list(0, 10000, (index) => ({
    id: index,
    cover: `https://picsum.photos/id/${index}/200/300`,
    title: `title ${index}`,
    desc: `desc ${index}`
  }))
})
</script>

<template>
  <up-list
    v-model:list-obj="virtualListObj"
    :scroll-view-props="{
      refresherEnabled: false,
      scrollY: true
    }"
    :virtual-list-props="{
      enabled: true,
      itemHeight: 120,
      containerHeight: 500
    }"
  >
    <template #default="{ item, index }">
      <view class="list-item-box" :key="item.id">
        <image :src="item.cover" class="cover" mode="aspectFill" />
        <view class="content">
          <view class="title">{{ item.title }}</view>
          <view class="desc">{{ item.desc }}</view>
        </view>
      </view>
    </template>
  </up-list>
</template>
```

--------------------------------

### Custom Image Size

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/empty.md

Demonstrates how to adjust the size of the empty state image using the `imageSize` prop, specified in pixels.

```vue
<template>
  <up-empty imageSize="120" description="自定义图片大小" />
</template>
```

--------------------------------

### Integrating Swiper-Nav with Swiper Component

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Shows how to configure Swiper-Nav as an internal indicator for the Swiper component using the 'indicator' prop.

```html
<up-swiper
  :list="swiperList"
  :height="200"
  :indicator="{
    type: 'dots',
    indicatorPosition: 'bottom',
    showControls: true,
    minShowNum: 2
  }"
/>
```

--------------------------------

### Custom Content with Slot

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/empty.md

Explains how to customize the content below the image using the default slot, such as adding a retry button.

```vue
<template>
  <up-empty image="error" description="加载失败">
    <div style="margin-top: 10px">
      <button icon="refresh" type="primary">重试</button>
    </div>
  </up-empty>
</template>
```

--------------------------------

### Basic Swiper Usage

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Renders a basic image carousel using the provided list of items. Ensure the `swiperList` data is properly defined.

```html
<up-swiper :list="swiperList" :height="200" />
```

--------------------------------

### Viewport Meta Tag Configuration

Source: https://github.com/iceywu/uni-ui-plus/blob/main/index.html

Configures the viewport meta tag, including support for CSS env() and constant() for safe area insets.

```javascript
use strict'

const coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))

document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />' )
```

--------------------------------

### Customize Empty State and Loading Skeleton

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/list.md

Use the #empty and #loading slots to provide custom content for empty states and loading skeletons respectively. The `v-model:list-obj` binds the list data, which should include loading/finished/list properties.

```vue
<up-list v-model:list-obj="result">
  <template #empty>
    <view>暂无数据</view>
  </template>
  <template #loading>
    <up-skeleton :num="3" />
  </template>
</up-list>
```

--------------------------------

### Import Theme Styles in App.vue

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Globally import the theme styles in your App.vue file to enable CSS custom properties for theming. This is crucial for correct component spacing, colors, and other styles.

```vue
<!-- App.vue -->
<style lang="scss">
@use 'uni-ui-plus/styles/theme/index.scss';
</style>

```

```vue
<!-- App.vue -->
<style lang="scss">
@use '@/uni_modules/uni-ui-plus/styles/theme/index.scss';
</style>

```

--------------------------------

### Configure Volar Support

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/guide/quick-use.md

Add global component types to your tsconfig.json to enable proper type checking and autocompletion for uni-ui-plus components within your Vue SFCs.

```json
{
  "compilerOptions": {
    "types": ["uni-ui-plus/global"]
  }
}

```

--------------------------------

### Swiper-Nav CSS Variables for Styling

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Illustrates CSS variables that can be used to customize the appearance of the Swiper-Nav component, such as dot size, colors, and button styles.

```scss
:root {
  --swiper-nav-dot-size: 12rpx;
  --swiper-nav-dot-color: rgba(255, 255, 255, 0.5);
  --swiper-nav-dot-active-color: rgba(255, 255, 255, 0.9);
  --swiper-nav-btn-size: 60rpx;
  --swiper-nav-btn-bg-color: rgba(0, 0, 0, 0.3);
  --swiper-nav-btn-color: #ffffff;
}
```

--------------------------------

### Custom Loading Slot

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Customize the loading state content using the `loading` slot. The `delay` attribute can control the display duration.

```vue
<up-image :src="src" width="120" height="120" :delay="40000">
  <template #loading>
    <view class="custom-loading">加载中自定义</view>
  </template>
</up-image>
```

--------------------------------

### Image Component Attributes

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

This snippet details the available attributes for the Image component, specifying their purpose, type, default values, and version introduced.

```APIDOC
## Image Component Attributes

This section describes the attributes that can be used to configure the Image component.

### Attributes

| Attribute Name | Description | Type | Default | Version |
|---|---|---|---|---|
| `min-height` | Minimum height of the image. | number / string | `200rpx` | - |
| `lazy-load` | Enables lazy loading for the image. | boolean | `true` | - |
| `custom-style` | Custom styles to apply to the root element. | string | `''` | - |
| `custom-class` | Custom class name for the root element. | string | `''` | - |
| `enable-preview` | Enables click-to-preview functionality. | boolean | `false` | - |
| `preview-src` | URL for the preview image. | string | `-` | - |
| `loading-text` | Text to display while the image is loading. | string | `加载中...` | 0.0.70 |
| `error-text` | Text to display when the image fails to load. | string | `加载异常` | 0.0.70 |
```

--------------------------------

### Skeleton with Animation

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/skeleton.md

Control the animation effect of the skeleton using the `animate` prop. This is typically linked to the loading state of your application.

```vue
<template>
  <up-skeleton :animate="isShowLoading" />
</template>

<script setup>
import { ref } from 'vue'
const isShowLoading = ref(false)
</script>
```

--------------------------------

### Image Fill Mode

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Set the image fill mode using the `mode` attribute. Supports various native mini-program modes.

```vue
<up-image
  src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg"
  width="120"
  height="120"
  mode="center"
/>
```

--------------------------------

### Skeleton with Multiple Rows

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/skeleton.md

Set the number of rows for the skeleton using the `rows` attribute. This is useful for displaying multiple lines of text as placeholders.

```vue
<template>
  <up-skeleton :rows="1" />
</template>
```

--------------------------------

### Lazy Loading Images

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Enable image lazy loading using the `lazy-load` attribute. This feature is enabled by default.

```vue
<up-image
  src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg"
  width="120"
  height="120"
  :lazy-load="true"
/>
```

--------------------------------

### Pull-to-Refresh and Infinite Loading

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/list.md

This snippet shows how to implement pull-to-refresh and infinite loading using the `@on-refresh` and `@on-load` events. Ensure `scroll-view-props.refresherEnabled` is set to true to enable pull-to-refresh.

```vue
<up-list
  v-model:list-obj="result"
  :scroll-view-props="{
    refresherEnabled: true,
    scrollY: true
  }"
  @on-refresh="onRefresh"
  @on-load="onLoadMore"
>
  <template #default="{ data: { list } }">
    <!-- 列表内容 -->
  </template>
</up-list>
```

--------------------------------

### Swiper with Minimum Indicator Display

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Configure the Swiper component to hide the indicator when the number of items is less than a specified minimum. This snippet demonstrates setting the 'minShowNum' property within the indicator configuration.

```html
<up-swiper 
  :list="singleItemList" 
  :height="200" 
  :indicator="{ type: 'dots', minShowNum: 2 }" 
/>
```

--------------------------------

### Skeleton with Custom Title Width

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/skeleton.md

Adjust the width of the title placeholder using the `titleWidth` attribute. This allows for more precise layout control.

```vue
<template>
  <up-skeleton titleWidth="50%" />
</template>
```

--------------------------------

### Swiper-Nav with Control Buttons

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Enables navigation control buttons (previous and next) for the Swiper-Nav component. It also includes event handlers for these buttons.

```html
<up-swiper-nav
  :current="currentIndex"
  :total="5"
  type="dots"
  :show-controls="true"
  @prev="handlePrev"
  @next="handleNext"
/>
```

--------------------------------

### Avatar Skeleton

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/skeleton.md

Display an avatar-shaped skeleton using `type="avatar"`. You can customize the size and shape of the avatar.

```vue
<template>
  <up-skeleton type="avatar" :avatarSize="80" avatarShape="circle" />
</template>
```

--------------------------------

### Swiper with Controls

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Enables the display of left and right navigation control buttons for the Swiper component.

```html
<up-swiper 
  :list="swiperList" 
  :height="200" 
  :indicator="{ type: 'dots', showControls: true }" 
/>
```

--------------------------------

### Swiper-Nav with Minimum Display Number

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Configures Swiper-Nav to not display if the total number of items is less than a specified minimum. In this case, it won't show because total (1) is less than min-show-num (2).

```html
<up-swiper-nav
  :current="0"
  :total="1"
  type="dots"
  :min-show-num="2"
/>
<!-- 因为 total(1) < minShowNum(2)，指示器不会显示 -->
```

--------------------------------

### Vertical Swiper Configuration

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Configures the Swiper component to operate in a vertical direction. This includes setting the component's direction and the indicator's direction and position.

```html
<up-swiper 
  :list="swiperList" 
  :height="300" 
  direction="vertical" 
  :indicator="{ type: 'dots', direction: 'vertical', indicatorPosition: 'right' }" 
/>
```

--------------------------------

### Swiper Indicator Types

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Configures different indicator types for the Swiper component. Choose from 'dots', 'dots-bar', 'fraction', or 'line'.

```html
<!-- 圆点指示器 -->
<up-swiper :list="swiperList" :height="200" :indicator="{ type: 'dots' }" />
```

```html
<!-- 圆点条指示器 -->
<up-swiper :list="swiperList" :height="200" :indicator="{ type: 'dots-bar' }" />
```

```html
<!-- 分式指示器 -->
<up-swiper :list="swiperList" :height="200" :indicator="{ type: 'fraction' }" />
```

```html
<!-- 线条指示器 -->
<up-swiper :list="swiperList" :height="200" :indicator="{ type: 'line' }" />
```

--------------------------------

### Vue Event Handlers for Swiper-Nav Controls

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Vue.js functions to handle the 'prev' and 'next' events emitted by the Swiper-Nav component when control buttons are clicked.

```ts
const handlePrev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  }
}

const handleNext = () => {
  if (currentIndex.value < 4) {
    currentIndex.value++
  }
}
```

--------------------------------

### Swiper Indicator Position

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper.md

Sets the position of the indicator for the Swiper component. Supports 8 positions like 'top-right'.

```html
<up-swiper 
  :list="swiperList" 
  :height="200" 
  :indicator="{ type: 'dots', indicatorPosition: 'top-right' }" 
/>
```

--------------------------------

### Vue Ref for Current Index

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

A Vue.js ref is used to manage the current index for the Swiper-Nav component.

```ts
import { ref } from 'vue'

const currentIndex = ref(0)
```

--------------------------------

### Custom Error Slot

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/img.md

Customize the error state content using the `error` slot. This is useful for displaying custom error messages or fallback images.

```vue
<up-image src="1" width="120" height="120" radius="8">
  <template #error>
    <view class="custom-error">加载异常自定义</view>
  </template>
</up-image>
```

--------------------------------

### Swiper-Nav in Vertical Direction

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/swiper-nav.md

Configures the Swiper-Nav component to display indicators vertically, positioned on the right side.

```html
<up-swiper-nav
  :current="0"
  :total="5"
  type="dots"
  direction="vertical"
  indicator-position="right"
/>
```

--------------------------------

### Disable Pull-to-Refresh

Source: https://github.com/iceywu/uni-ui-plus/blob/main/docs/component/list.md

To disable the pull-to-refresh functionality, set `scroll-view-props.refresherEnabled` to `false`. This snippet illustrates how to achieve this while keeping infinite loading enabled.

```vue
<up-list
  v-model:list-obj="result"
  :scroll-view-props="{
    refresherEnabled: false,  // 禁用下拉刷新
    scrollY: true
  }"
  @on-load="onLoadMore"
>
  <template #default="{ data: { list } }">
    <!-- 列表内容 -->
  </template>
</up-list>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.