57 lines
1.2 KiB
Markdown
57 lines
1.2 KiB
Markdown
---
|
|
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>
|
|
```
|