小程序组件实现商城分类列表,左右列表联动

1,042 阅读1分钟

tabside两栏选项卡,一般作为分类使用,常见于小米/华为官方产品分类,左边一栏为产品分类菜单,右边为分类产品列表

  • 菜单栏 菜单栏一般是一个单一的列表,需要考虑多余一屏列表的顺滑滚动,使用scroll-view容器作为列表展示容器

  • 内容页 内容页有多种展示方式,如同页模式,整个内容页为一个整体页面,swiper模式,分屏显示不同菜单栏目的内容,demo中使用swiper的方式

效果

与tabpro选项卡类似,实际上本demo正式基于tabpro组件改造而成

  • 菜单tap事件切换swiper内容
  • 内容页swiper切换激活某一分类菜单
  • 放出钩子方法供业务调用

源码

github搜索 aotoo-xquery -> pages -> tabside
微信搜索小程序: xquery

下列小程序DEMO包含下拉菜单、通用型筛选列表、索引列表、markdown(包含表格)、评分组件、水果老虎机、折叠面板、双栏分类导航(左右)、刮刮卡、日历等组件