jqweui 中的tabbar导航
2024-09-05 18:04:16
最近做微信的服务号项目,用的jqweui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好。真是很让人头疼!
所以结合着自己做的项目,随便写一点东西。
比如说,tabbar导航的切换。官网给说的对应的文档如下图:
从我个人角度而言,实在不能短时间能看出来具体的用法。
还是直接晒一下用法吧!
<div id="tab-home" class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
<div class="weui-tabbar__icon">
<i class="icon tabbar-icon-home"></i>
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="icon tabbar-icon-order"></i>
</div>
<p class="weui-tabbar__label">订单</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="icon tabbar-icon-me"></i>
</div>
<p class="weui-tabbar__label">我的</p>
</a>
</div>
//像如下的这种用法其实可以直接写在官网的api里的,多的就不吐槽了。
weui.tab('#tab-home', {
defaultIndex: 0,
onChange: (index) => {
if(index === 0) {//jump是封装好的更改location的值,就是一个跳转函数。
jump('//html/index.html');
} else if(index === 1) {
jump('//html/order/order-index.html');
} else if(index === 2) {
jump('//html/member/me-index.html');
}
}
});
可以从weui.js里看到tab函数,其实就是一个封装好的选项卡切换函数。
function tab(selector) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var $eles = (0, _util2.default)(selector);
options = _util2.default.extend({
defaultIndex: 0,
onChange: _util2.default.noop
}, options); $eles.forEach(function (ele) {
var $tab = (0, _util2.default)(ele);
var $tabItems = $tab.find('.weui-navbar__item, .weui-tabbar__item');
var $tabContents = $tab.find('.weui-tab__content'); $tabItems.eq(options.defaultIndex).addClass('weui-bar__item_on');
$tabContents.eq(options.defaultIndex).show(); $tabItems.on('click', function () {
var $this = (0, _util2.default)(this),
index = $this.index(); $tabItems.removeClass('weui-bar__item_on');
$this.addClass('weui-bar__item_on'); $tabContents.hide();
$tabContents.eq(index).show(); options.onChange.call(this, index);
});
}); return this;
} /*
最新文章
- CSS盒子模型的理解
- VS2012编译的Windows服务启动后立即停止的解决方案
- [安卓]windows下如何安装Android源码
- 【wikioi】1922 骑士共存问题(网络流/二分图匹配)
- [转载]mysql插入大量数据
- [原创汉化]linux前端神器 WebStorm8 汉化
- POJ 2114 Boatherds【Tree,点分治】
- COJ 0034 动态的数字三角形
- 利用dedecms给近三天(或当天)发布的文章显示红色日期或加上new字或new小图片
- Ansible 变量
- MFC简单绘制安卓机器人
- javaScript基础概念小知识点集
- java web(三):ServletContext、session、ServletConfig、request、response对象
- opencv 之 transformation
- [matlab] 5.字符运算与微积分
- 【转载】奇异值分解(SVD)计算过程示例
- MySQL的时间字段转换
- hibernate12--缓存
- SpringMVC入门学习(一)
- C#自定义无边框MessageBox窗体
热门文章
- Exadata 上关于SAS盘的小秘密
- Java中的生产者和消费者实例(多线程 等待唤醒机制)
- An internal error occurred during: ";Add Deployment";. Container with path org.eclipse.jdt.launching.
- python模块之calendar方法详细介绍
- 非递归遍历二叉树Java版的实现代码(没写层次遍历)
- UVALive 7500 Boxes and Balls 2015EC final 签到题 二分
- Nginx负载均衡与反向代理的配置实例
- Unity3d开发的第一个实例
- java中的递归思想及应用
- hibernate课程 初探单表映射2-1 hibernate进阶 本章简介