QuickReference/source/_posts/frontend/uniapp/component1.md

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

组件自动导入

	"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

<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>