前端框架选型是企业提升开发效率与用户体验的关键因素
643
2022-10-13
tabs for wechat app 微信小程序的多tab实现,各tab页面状态独立
wxTabs
tabs for wechat app
特点:
各页面状态(空白,错误,加载中)已自动处理
页面下拉刷新和上拉加载更多的方法已实现,并封装在tabUtil中,无需在page中书写.
tab之间的切换逻辑已处理.
使用时需要做的:
拷贝
netUtil.js拷贝到utils目录下
lib文件夹拷贝到根目录下
修改
针对具体项目微调netUtil里的一些字段,比如将用于分批加载的pagesize和pageIndex改成自己网络请求里的相应字段.
tab颜色和最小宽度,以及高度可在tabs.wxss里修改.
使用(参考pages\index)
写每个页面的wxml和wxss,模板化,并在具体页面导入
引入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; });
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~