add uniapp component...

source/_posts/frontend/uniapp/component1.md

@@ -0,0 +1,56 @@
+---
+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>
+```