微信:brown_7778
如果该组件库对您的日常开发有所帮助或者说为您提供了一定的开发思路,希望可以随手点一个star🌟,以此来激励作者输出更优质的代码👏
npm i -D taro-virtual-list
import { TaroVirtualList } from 'taro-virtual-list'
export default function Demo(): JSX.Element {
// 渲染列表Item
const renderFunc = (item, index, pageIndex) => {
return (
<View className="el">{`当前是第${item}个元素,是第${pageIndex}屏的数据`}</View>
)
}
const handleBottom = () => {
console.log('触底了')
}
const handleComplete = () => {
console.log('加载完成')
}
return (
<View>
<TaroVirtualList
list={list}
onRender={renderFunc}
onBottom={handleBottom}
onComplete={handleComplete}
scrollViewProps={{
style: {
"height": '100vh',
},
}}
/>
</View>
)
}
import { TaroVirtualList } from 'taro-virtual-list'
export default function Demo(): JSX.Element {
// 渲染列表Item
const renderFunc = (item, index, pageIndex) => {
return (
<View className="el">{`当前是第${item}个元素,是第${pageIndex}屏的数据`}</View>
)
}
const onPageScrollToLower = () => {
// 执行分页数据请求
}
return (
<View>
<TaroVirtualList
autoScrollTop={false}
listType="multi"
list={list}
pageNum={页码}
segmentNum={每页的数据量}
onRender={renderFunc}
scrollViewProps={{
onScrollToLower: onPageScrollToLower,
lowerThreshold: 50,
style: {
"height": '100vh',
},
}}
/>
</View>
)
}
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
list | Array | - | 是 | 列表数据 |
listId | String | "zt-virtial-list" | 否 | 虚拟列表唯一id(防止同一个页面有多个虚拟列表导致渲染错乱) |
listType | String | "single" | 否 | 传入组件内的list类型 single:一次性传入列表所有数据 multi:从服务端分页请求,合并之后传入组件 |
pageNum | Number | 1 | 否 | 当前页码,当list是通过服务端分页获取的时候必传,最小值是1 |
segmentNum | Number | 10 | 否 | 自定义二维数组每一维度的数量,默认10,当list是通过服务端分页获取的时候,推荐传每页的数据量,且必传 |
autoScrollTop | Boolean | true | 否 | 组件内部是否需要根据list数据变化自动滚动至列表顶部 |
screenNum | Number | 2 | 否 | 指定监听页面显示区域基准值,例如2,则组件会监听 2 * scrollHeight高度的上下区域范围(该值会影响页面真实节点的渲染数量,值越大,白屏几率越小,但是页面性能也就越差) |
scrollViewProps | Object | - | 否 | 自定义scrollView的参数,会合并到组件内部的scrollView的参数里 |
参数 | 回调参数 | 默认值 | 必填 | 说明 | |
---|---|---|---|---|---|
onRender | (item, index, segmentIndex) => {} item: 列表的单个数据项的值; index:列表的单个数据项的index; segmentIndex:当前二维数组维度的index |
- | 列表的渲染回调,用于自定义列表Item | - | 列表的渲染回调,用于自定义列表Item |
onBottom | - | - | 否 | 列表是否已经触底回调,注:只有在listType=single时有效 | |
onComplete | - | - | 否 | 列表是否已经把全部数据加载完成的回调 | |
onRenderTop | - | - | 否 | 列表上部分内容渲染回调,用于渲染插入虚拟列表上边的内容 | |
onRenderBottom | - | - | 否 | 列表下部分内容渲染回调,用于渲染插入虚拟列表下边的内容 | |
onRenderLoad | - | - | 否 | 用于上拉到底部渲染底部loading样式的回调 | |
onGetScrollData | (res) => {} | - | 否 | 获取滚动信息,以传入的listId作为key,默认key是“zt-virtial-list”,目的是让用户可以自定义组件的滚动高度,以此解决https://github.com/NervJS/taro/issues/8466的问题 |
问题:此组件在快速滑动页面的时候难免会出现短暂白屏问题,这个问题目前世面上是没有很好的解决方案的
优化:可以做一个骨架屏
放在列表的下方(即列表组件覆盖在骨架屏上方),此时可以将zt-main-list
这个元素背景色置为transparent
,这是在快速滑动过程中,下方的骨架屏就可以漏出来了,给用户带来一个正在加载数据的效果,缓解用户焦虑(ps:如果有更好的方案,欢迎交流)
如果用着感觉还不错,欢迎赐予一枚star,以此来激励作者输出更多优质代码,造福一方😄