系列文章: 微信细小程序 教程之WXSS 微信细小程序 教程之引用 微信细小程序 教程之事件 微信细小程序 教程之模板 微信细小程序 教程......

在微信细小程序中，列表渲染方式有两种：wx:for和组件。wx:for是一种直接在wxml文件中写列表结构的方法， 而组件则是将列表结构定义在组件中，以后只需要引用这玩意儿即可再来一次用。

对于较轻巧松的列表结构， 能直接用wx:for进行渲染，在wxml文件中引入js文件中定义的数据即可。比方说：

{{item.content}} // JS代码data: { list: }

二、 优化列表性能

对于较巨大的列表，直接用wx:for进行渲染会关系到性能，能考虑用scroll-view组件进行优化。scroll-view组件会在屏幕上渲染可见区域和几个即将出现的元素， 而不会渲染整个列表，巨大巨大搞优良了渲染速度。比方说：

{{item.content}} // JS代码data: { list: }

再说一个，还能用分页加载的方式对列表进行优化。在首次加载时只渲染有些数据，在用户滑动到底部时加载更许多数据。这种方式能少许些首次加载时候，搞优良用户体验。比方说：

// JS代码data: { list: , page: , size: , hasMore: true, loadingMore: false},onLoad: function { this.loadData},onReachBottom: function { if { this.loadData }},loadData: function { this.setData wx.request { this.setData } this.setData, page: this.data.page + , loadingMore: false }) } })}

三、 优化列表渲染性能

在列表渲染时避免老是对DOM进行操作能搞优良性能。能将要更新鲜的数据保存在一个新鲜的对象中，再用setData一次性更新鲜到页面中。比方说：

// JS代码data: { list: , dataMap: {}},loadData: function { wx.request this.setData } }),onClickItem: function { let id = e.currentTarget.dataset.id let item = this.data.dataMap // ...}

再说一个，能用虚拟滚动的方式优化列表渲染性能。虚拟滚动是一种只渲染可见有些的列表渲染方式，能少许些DOM操作和渲染时候，搞优良性能。注意，虚拟滚动需要自己实现，需要考虑许多种情况，如滑动方向、滑动速度等。这里只给一个轻巧松的示例：

// JS代码data: { startIndex: null, endIndex: null, list: },onScroll: function { let scrollTop = e.detail.scrollTop let itemHeight = let height = e.detail.height let startIndex = Math.floor let endIndex = Math.min this.setData},loadData: function { wx.request } })}

四、 过滤、排序与分组

在实际应用中，列表渲染往往需要进行数据过滤、排序和分组等操作。能用JavaScript内置的方法， 如filter、sort和reduce等，对列表数据进行操作。比方说：