最近做微信的服务号项目,用的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;
} /*

  

jqweui 中的tabbar导航的更多相关文章

  1. weui 中的tabbar导航

    最近做微信的服务号项目,用的weui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航的切 ...

  2. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  3. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  4. 18. vue-router案例-tabBar导航

    目标: 做一个导航tabbar 一. 分析 我们的目标是做一个导航tabbar, 要求 这个导航不仅可以在一个页面使用, 可以在多个页面通用 每个页面的样式可能不一样 每个页面的图标, 文字可能不一样 ...

  5. php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)

    foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...

  6. taro中自定义tabbar实现中间图标凸出效果

    遇到的一个需求是在tabbar上有一个凸起的小图标, 但是微信自带的tabbar是没有这个效果的, 无奈,只能使用自定义tabbar,查找了多方文档后发现大多是原生小程序实现, 关于taro文档的少之 ...

  7. 32.怎样在Swift中实现TabBar和导航视图结合的项目?

    导航栏和TabBar结合的项目,在我们平常开发中会经常看到,下面我们通过自定义的TabBar来实现一个导航和TabBar结合的Demo. 1.自定义TabBar import UIKit class ...

  8. OS开发(2):自定义tabbar | 导航条 | 突显中间按钮

    tabbar是放在APP底部的控件,也叫navigationbar或导航条.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 需求是这样的,需要一个特殊一点的tabbar,要求 ...

  9. Flutter - TabBar导航栏切换后,状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

随机推荐

  1. CentOS下ganglia监控部署

    第一步:CentOS环境准备 1.yum -y install apr-devel apr-util check-devel cairo-devel pango-devel libxml2-devel ...

  2. chapter03

    import scala.collection.mutable.ArrayBuffer /** * Created by EX-CHENZECHAO001 on 2018-03-29. */class ...

  3. Java面向对象_对象一一对应关系和this关键字

    一.打个比方,一个人有一个身份证号,一个身份证号对应一个人.一个英雄对应一把武器,一把武器对应一个英雄.生活中很多对象都存在一一对应关系,那么一一对应关系在代码中是如何实现的呢?举个例子,英雄和武器一 ...

  4. SQLServer数据库语句大全汇总

    目录清单CONTEXT LIST1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore database2.数据 ...

  5. vs2013安装时提示核心功能错误

    VS核心功能安装时发生严重错误:解决办法:计算机管理->设备管理器->非即插即用驱动程序->http改为自动.

  6. 移动端,点击a标签链接的pdf报错 Resource interpreted as Document but transferred with MIME type application/pdf

    源码: <a href="11.pdf" class="actcont_a fl report_a" style="display: block ...

  7. JS转换日期格式

    // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...

  8. Eucalyptus常用查询命令

    前言: Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus)  ...

  9. (转载)office 2003 gaozhi.msi 缺失提示问题修复

    某些GHOST版win7,自带office 2003,每次启动word,它都会提示"稿纸没安装"云云,找不到那个文件.可是我搜遍了硬盘,确实没有那个文件.每次都要点取消,这个提示才 ...

  10. mustache.js 数组循环的索引

    在使用mustache作为模板引擎时,想要利用数组中的对象的索引排序,却发现mustache中无法获得数组索引,在一番搜索之后,发现在数组的对象中加入索引,就可以了,示例如下 /html {{#dat ...