评论

vant + recycle-view 常见长列表实战demo

vant Ui + recycle-view 常见长列表实战 demo 代码片段在文末

recycle-view 常列表实战

昨天拿到一个需求

分解需求:

  1. 自定义标题栏
  2. 搜索框禁用,做点击跳转到搜索详情页
  3. 分类,左右滑动
  4. 点击菜单展示所有分类
  5. tabs吸顶
  6. 常列表

需求是老项目新增需求,前期类似的需求都是手写原生,后期用了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 重新安装走一遍。

总结

有点儿短~

想水一篇文章的,发现没得写。。。水文

点赞 5
收藏
评论

3 个评论

  • YGBen
    YGBen
    01-04

    recycle-view加入后,尝试过怎么实现上拉加载吗?

    01-04
    赞同
    回复
  • 9这么6
    9这么6
    2019-12-20

    你构建完npm 怎么在真机上预览效果呢 小程序生成预览二维码的时候不会打包依赖啊

    2019-12-20
    赞同
    回复 3
    • 小满
      小满
      2019-12-21
      不会打包所有依赖,你项目中用到的会打包的把
      2019-12-21
      回复
    • 兵
      05-07
      上滑加载如何用长列表做呢
      05-07
      回复
    • 9这么6
      9这么6
      05-09回复
      滑到最下面直接append 就可以了啊
      05-09
      回复
  • stop eating
    stop eating
    2019-12-17
    binnie smile
    2019-12-17
    赞同
    回复 4
    • 小满
      小满
      2019-12-17
      binnie 万岁
      2019-12-17
      回复
    • 9这么6
      9这么6
      2019-12-20
      怎么在手机上预览呢 生成二维码的时候不打包依赖啊
      2019-12-20
      回复
    • 兵
      05-07回复9这么6
      如何预览的问题解决没
      05-07
      回复
    • 9这么6
      9这么6
      05-09
      嗯在模拟器上能跑起来 手机上就能直接看 直接预览就可以了
      05-09
      回复
登录 后发表内容