tabs for wechat app
各页面状态(空白,错误,加载中)已自动处理
页面下拉刷新和上拉加载更多的方法已实现,并封装在tabUtil中,无需在page中书写.
tab之间的切换逻辑已处理.
netUtil.js拷贝到utils目录下
lib文件夹拷贝到根目录下
针对具体项目微调netUtil里的一些字段,比如将用于分批加载的pagesize和pageIndex改成自己网络请求里的相应字段.
tab颜色和最小宽度,以及高度可在tabs.wxss里修改.
写每个页面的wxml和wxss,模板化,并在具体页面导入
<!--tab标题-->
<import src="../../lib/tab/tabs.wxml"/>
<view style="width: 100%">
<template is="tabs" data="{{...tabInfo}}" />
</view>
<!--tab下方的listview-->
<import src="../../lib/listview/albumlv.wxml"/>
<block wx:for-items="{{tabInfo.tabStrs}}" wx:for-item="str" wx:for-index="i" wx:key="unique">
<view wx:if="{{tabInfo.tabIndex == i}}" style="width: 100%;height: 60%">
<template is="albumlv" data="{{...tabDatas[i]}}" />
</view>
</block>
引入js:
var netUtil=require("../../utils/netUtil.js");
var tabUtil=require("../../lib/tab/tabUtil.js");
var lvUtil=require("../../lib/tab/lvUtil.js");
调用:
var tabStrs = [' ',' ','推荐','学业成绩','行为问题','亲子关系','人际关系','情绪困扰'];
tabUtil.initTab(that,tabStrs,2,function(i){
var params = {};
params.type=1;
params.labelIds ="1,2,3,4,5";
params.sourceType=0;
params.priceType=0;
params.categoryIds = i-2;
params.pageIndex = 1;
params.pageSize = 20;
var lvBean = lvUtil.initLv(that,API.Lesson.SEARCH,params,i,'',{
getListFromNetData:function(netData){
return netData;
},
handleItemInfo:function(item){
// utils.showVoiceItemPriceText(item);
}
});
return lvBean;
});