tabside兩欄選項卡,一般作為分類使用,常見于小米/華為官方產(chǎn)品分類,左邊一欄為產(chǎn)品分類菜單,右邊為分類產(chǎn)品列表
tabside兩欄選項卡,一般作為分類使用,常見于小米/華為官方產(chǎn)品分類,左邊一欄為產(chǎn)品分類菜單,右邊為分類產(chǎn)品列表
菜單欄
菜單欄一般是一個單一的列表,需要考慮多余一屏列表的順滑滾動,使用scroll-view容器作為列表展示容器
內(nèi)容頁
內(nèi)容頁有多種展示方式,如同頁模式,整個內(nèi)容頁為一個整體頁面,swiper模式,分屏顯示不同菜單欄目的內(nèi)容,demo中使用swiper的方式
效果
與tabpro選項卡類似,實際上本demo正式基于tabpro組件改造而成
菜單tap事件切換swiper內(nèi)容
內(nèi)容頁swiper切換激活某一分類菜單
放出鉤子方法供業(yè)務(wù)調(diào)用
源碼
github搜索 aotoo-xquery -> pages -> tabside
微信搜索小程序: xquery
小程序代碼片段