---
title: 组件使用
date: 2024-08-05 14:07:01
tags: uniapp
---

### 组件自动导入
```json
	"easycom":{
	  "autoscan": true,
	  "custom": {
	    "^tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"  // 匹配components目录内的vue文件
	  }
	}
```

### `tui-sticky 吸顶容器` 

> 包含 以下 `tui` 组件 :
> - tui-sticky
> - tui-list-view
> - tui-list-cell
> 

```html
<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx" container>
    <!-- header start -->
    <template v-slot:header>
        <view class="sticky-item">
            <view class="setting">设置</view>
        </view>
    </template>
    <!-- header end -->
    <!--内容 start-->
    <template v-slot:content>
        <tui-list-view class="content">
            <tui-list-cell  :arrow="false">
                <switch class='switch' checked color="#FFCC33" />
            </tui-list-cell>
        </tui-list-view>
    </template>
    <!--内容 end-->
</tui-sticky>

<script setup>
    import { ref } from 'vue'
    import { onPageScroll } from '@dcloudio/uni-app'

    // 定义 scrollTop 响应式变量
    const scrollTop = ref(0)
    // 监听页面滚动事件
    onPageScroll((e) => {
        scrollTop.value = e.scrollTop
    })
</script>
```