vant + recycle-view 常见长列表实战demo
recycle-view 常列表实战
昨天拿到一个需求
[图片]
分解需求:
自定义标题栏
搜索框禁用,做点击跳转到搜索详情页
分类,左右滑动
点击菜单展示所有分类
tabs吸顶
常列表
需求是老项目新增需求,前期类似的需求都是手写原生,后期用了vant Ui。维护好难-。-,标题栏统一处理忽略,接下来就是处理 vant ui 和 常列表,先对着原型撸个demo,代码片段在最后。
[图片]
vant ui
之前打包已经2M多了,在用一个ui框架的话后期维护真的。。所以继续 vant ui
使用的组件 index.json
[代码] // dropdown-menu 待定
{
"usingComponents": {
"recycle-view": "miniprogram-recycle-view/recycle-view",
"recycle-item": "miniprogram-recycle-view/recycle-item",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",
"van-icon": "@vant/weapp/icon/index",
"van-popup": "@vant/weapp/popup/index",
"van-search": "@vant/weapp/search/index"
}
}
[代码]
代码片段:https://developers.weixin.qq.com/s/1ZmiCGm87qdb
删除了node_modules,太大了超过一M不能上传代码片段,会报错请忽略,介意的话 npm 重新安装走一遍。
总结
有点儿短~
想水一篇文章的,发现没得写。。。水文