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)