组件自动导入

1
2
3
4
5
6
"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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>