nutui-uniapp nut-list组件 not found

430 阅读1分钟

scrollList.vue components/scrollList/scrollList.vue

<template>
    <div class="demo">
      <h2>基础用法</h2>
      <nut-cell>
        <nut-list :height="50" :listData="count" @scroll="handleScroll">
          <template v-slot="{ item, index }">
            <div class="list-item">
              {{ index }}
            </div>
          </template>
        </nut-list>
      </nut-cell>
    </div>
  </template>
  <script lang="ts">
  import { onMounted, reactive, toRefs } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        count: new Array(100).fill(0)
      });
  
      const handleScroll = () => {
        let arr = new Array(100).fill(0);
        const len = state.count.length;
        state.count = state.count.concat(arr.map((item: number, index: number) => len + index + 1));
      };
  
      onMounted(() => {
        state.count = state.count.map((item: number, index: number) => index + 1);
      })
  
      return { ...toRefs(state), handleScroll };
    }
  };
  </script>
  <style lang="scss">
  body {
    width: 100%;
    height: 100vh;
  }
  #app {
    width: 100%;
    height: 100%;
  }
  .demo {
    .nut-cell {
      height: 100%;
    }
    .nut-list-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50px;
      margin-bottom: 10px;
      background-color: #f4a8b6;
      border-radius: 10px;
    }
  }
  </style>

index.vue pages/index

<template>
  <view class="content">
    <scrollLists></scrollLists>
    <view class="homTabbar">
      <nut-tabbar @tab-switch="tabSwitch">
        <nut-tabbar-item tab-title="标签" icon="home"></nut-tabbar-item>
        <nut-tabbar-item tab-title="标签" icon="category"> </nut-tabbar-item>
        <nut-tabbar-item tab-title="标签" icon="find"></nut-tabbar-item>
        <nut-tabbar-item tab-title="标签" icon="cart"></nut-tabbar-item>
        <nut-tabbar-item tab-title="标签" icon="my"></nut-tabbar-item>
      </nut-tabbar>
    </view>
  </view>
</template>

<script setup lang="ts">
</script>


<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.homTabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1000;
}
</style>

err

Component is not found in path "node-modules/nutui-uniapp/components/list/list" (using by "components/scrollLists/scrollLists")(env: Windows,mp,1.06.2309072; lib: 3.0.1)

重装ui库解决