tabs for wechat app 微信小程序的多tab实现,各tab页面状态独立
JavaScript
Latest commit bb65412 Jan 6, 2017 huangshuisheng init
Permalink
Failed to load latest commit information.
.idea init Jan 6, 2017
lib init Jan 6, 2017
pages init Jan 6, 2017
utils init Jan 6, 2017
LICENSE
README.md init Jan 6, 2017
app.js init Jan 6, 2017
app.json init Jan 6, 2017
app.wxss init Jan 6, 2017
git.ignore init Jan 6, 2017

README.md

wxTabs

tabs for wechat app

特点:

各页面状态(空白,错误,加载中)已自动处理

页面下拉刷新和上拉加载更多的方法已实现,并封装在tabUtil中,无需在page中书写.

tab之间的切换逻辑已处理.

使用时需要做的:

拷贝

netUtil.js拷贝到utils目录下

lib文件夹拷贝到根目录下

修改

针对具体项目微调netUtil里的一些字段,比如将用于分批加载的pagesize和pageIndex改成自己网络请求里的相应字段.

tab颜色和最小宽度,以及高度可在tabs.wxss里修改.

使用(参考pages\index)

写每个页面的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;
    });