通用列表 · Vant
核心 API 请查阅 通用列表-基础篇，本文档仅说明 Vant 框架下的特化配置。
导入路径
javascript
import { $initHook, $JiessList } from '@jiess/plus/vant';Vant 列表组件映射
| Jiess 概念 | Vant 组件 | 说明 |
|---|---|---|
$JiessList | van-list（滚动加载） | 移动端列表 |
$Search | van-search + van-form | 搜索栏 |
$renderItem | 自定义渲染函数 | 列表项自定义渲染 |
Vant 特有——滚动加载
Vant 的 $JiessList 采用滚动加载模式（上拉加载更多），而非分页：
javascript
$JiessList({
action: '/api/users',
$renderItem(item, jiess) {
return {
tag: 'div',
className: 'ai-list-item',
children: [
{ tag: 'h4', text: item.datas.name },
{ tag: 'p', text: item.datas.email },
],
};
},
// 以下透传给 van-list
offset: 100, // 滚动触发距离
loadingText: '加载中...',
finishedText: '没有更多了',
errorText: '加载失败，点击重试',
immediateCheck: false, // 是否立即检查
});自定义渲染函数
javascript
$JiessList({
$renderItem(item, jiess) {
const { name, email, status, createTime } = item.datas;
return {
tag: 'div',
style: { padding: '12px 16px', borderBottom: '1px solid #f0f0f0' },
children: [
{
tag: 'div',
style: { display: 'flex', justifyContent: 'space-between' },
children: [
{ tag: 'span', style: { fontWeight: 'bold' }, text: name },
{ tag: 'span', style: { color: status ? '#07c160' : '#999' }, text: status ? '启用' : '禁用' },
],
},
{ tag: 'p', style: { color: '#666', fontSize: '14px' }, text: email },
{ tag: 'p', style: { color: '#999', fontSize: '12px' }, text: createTime },
],
};
},
});搜索栏（Vant 特有）
javascript
$JiessList({
$search: {
$content: {
$keyword: {
$placeholder: '搜索用户',
$formItemParam: {
inputAlign: 'right',
},
},
},
$tools: {
$Button: {
children: '搜索',
size: 'small',
onClick: 'search',
},
},
},
});注意事项
| 事项 | 说明 |
|---|---|
| 无分页 | Vant $JiessList 使用滚动加载，不支持传统分页 |
| 无排序 | 移动端列表不支持列排序 |
| 安全区适配 | 建议配合 safeAreaInsetBottom 使用 |
实战示例
示例1：商品列表（图文卡片 + 上拉加载）
javascript
$JiessList({
action: '/api/products',
offset: 100,
loadingText: '加载中...',
finishedText: '— 没有更多了 —',
errorText: '加载失败，点击重试',
immediateCheck: true,
$renderItem(item, jiess) {
const { name, image, price, sales, desc } = item.datas;
return {
tag: 'div',
className: 'ai-product-card',
style: {
padding: '12px 16px',
borderBottom: '1px solid #f0f0f0',
display: 'flex',
gap: '12px',
background: '#fff',
},
children: [
{
tag: 'img',
src: image,
style: { width: '80px', height: '80px', borderRadius: '8px', objectFit: 'cover' },
},
{
tag: 'div',
style: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' },
children: [
{
tag: 'div',
style: { fontWeight: 'bold', fontSize: '15px', color: '#333' },
text: name,
},
{
tag: 'div',
style: { fontSize: '13px', color: '#999', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
text: desc,
},
{
tag: 'div',
style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
children: [
{
tag: 'span',
style: { color: '#ee0a24', fontSize: '16px', fontWeight: 'bold' },
text: `¥${price}`,
},
{
tag: 'span',
style: { color: '#999', fontSize: '12px' },
text: `已售 ${sales}`,
},
],
},
],
},
],
};
},
});示例2：下拉刷新 + 上拉加载 + 错误重试
javascript
$JiessList({
action: '/api/feeds',
limit: 15,
// 下拉刷新配置
$refresh: {
pullingText: '下拉刷新',
loosingText: '释放刷新',
loadingText: '正在刷新...',
successText: '刷新成功',
successDuration: 1000,
},
// 上拉加载配置
offset: 50,
loadingText: '加载中...',
finishedText: '没有更多了',
errorText: '加载失败，点击重试',
$renderItem(item) {
const { title, content, author, avatar, time } = item.datas;
return {
tag: 'div',
className: 'ai-feed-item',
style: { padding: '14px 16px', borderBottom: '1px solid #f5f5f5' },
children: [
{
tag: 'div',
style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' },
children: [
{
tag: 'img',
src: avatar,
style: { width: '32px', height: '32px', borderRadius: '50%' },
},
{
tag: 'div',
style: { fontSize: '14px', fontWeight: 'bold', color: '#333' },
text: author,
},
{
tag: 'span',
style: { fontSize: '12px', color: '#999', marginLeft: 'auto' },
text: time,
},
],
},
{
tag: 'div',
style: { fontSize: '16px', fontWeight: 'bold', color: '#222', marginBottom: '6px' },
text: title,
},
{
tag: 'div',
style: { fontSize: '14px', color: '#666', lineHeight: '1.5' },
text: content,
},
],
};
},
});示例3：带筛选条件的列表
javascript
$JiessList({
action: '/api/users',
limit: 20,
// 搜索栏（Vant 样式搜索）
$search: {
$content: {
$keyword: {
$placeholder: '搜索用户',
shape: 'round',
$formItemParam: {
inputAlign: 'right',
},
},
},
$tools: {
$Button: {
children: '筛选',
size: 'small',
onClick: () => {
// 弹出筛选弹框
filterDialog.open({ /* 筛选表单 */ });
},
},
},
},
$renderItem(item) {
const { name, email, status, phone } = item.datas;
return {
tag: 'div',
className: 'ai-user-item',
style: {
padding: '14px 16px',
borderBottom: '1px solid #f0f0f0',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
children: [
{
tag: 'div',
style: { flex: 1 },
children: [
{
tag: 'div',
style: { fontSize: '15px', fontWeight: 'bold' },
text: name,
},
{
tag: 'div',
style: { fontSize: '13px', color: '#666', marginTop: '4px' },
text: email,
},
{
tag: 'div',
style: { fontSize: '12px', color: '#999', marginTop: '2px' },
text: phone,
},
],
},
{
tag: 'span',
style: {
padding: '2px 10px',
borderRadius: '12px',
fontSize: '12px',
color: status === 1 ? '#07c160' : '#999',
background: status === 1 ? '#e8f8ee' : '#f5f5f5',
},
text: status === 1 ? '启用' : '禁用',
},
],
};
},
});