<!DOCTYPE html>
<html class="pixel-ratio-1">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>xxx</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="">

    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style>
　　　　 /*注意: 一定要定义body,html的style*/
        body, html {
            height: 100%;
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body ontouchstart="" style="background:#F8F8F8;">

<div class="weui-tab">
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">

            <!----------------注意: 每个页面都必须写在tabxxx里, 例如id=tab1----------------------->

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img style="max-width:100%;" src="__STATIC__/images/shequ/banner_123.jpg" /></div>
                    <div class="swiper-slide"><img style="max-width:100%;"  src="__STATIC__/images/shequ/banner_123.jpg" /></div>
                    <div class="swiper-slide"><img style="max-width:100%;"  src="__STATIC__/images/shequ/banner_123.jpg" /></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="javascript:;">
                    <div class="weui-cell__hd"><img src="aa.png"></div>
                    <div class="weui-cell__bd">
                        <p>隔离防护乳试用装来袭</p>
                    </div>
                    <div class="weui-cell__ft"></div>
                </a>
            </div>

            <div class="weui-grids" style="background:#fff;margin-top:14px;margin-bottom:60px;">
                <a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
                    <div class="weui-grid__icon">
                        <img src="data:images/icon_nav_button.png" alt="">
                    </div>
                    <p class="weui-grid__label">
                        护肤打卡
                    </p>
                </a>
                <a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
                    <div class="weui-grid__icon">
                        <img src="data:images/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui-grid__label">
                        肌肤测试
                    </p>
                </a>
                <a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
                    <div class="weui-grid__icon">
                        <img src="data:images/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui-grid__label">
                        必读宝典
                    </p>
                </a>
                <a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
                    <div class="weui-grid__icon">
                        <img src="data:images/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui-grid__label">
                        xxx官网
                    </p>
                </a>
            </div>

            <!--------------------------------------->

        </div>
        <div id="tab2" class="weui-tab__bd-item">
            <h1>页面二</h1>
        </div>
        <div id="tab3" class="weui-tab__bd-item">
            <h1>页面三</h1>
        </div>
        <div id="tab4" class="weui-tab__bd-item">
            <h1>页面四</h1>
        </div>
    </div>

    <div class="weui-tabbar">
        <a href="http://jqweui.com/dist/demos/tabbar.html#tab1" class="weui-tabbar__item weui-bar__item--on">
            <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
            <div class="weui-tabbar__icon">
                <img src="/1_files/icon_nav_button.png" alt="">
            </div>
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="http://jqweui.com/dist/demos/tabbar.html#tab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="/1_files/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-tabbar__label">变美</p>
        </a>
        <a href="http://jqweui.com/dist/demos/tabbar.html#tab3" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="/1_files/icon_nav_article.png" alt="">
            </div>
            <p class="weui-tabbar__label">粉丝圈</p>
        </a>
        <a href="http://jqweui.com/dist/demos/tabbar.html#tab4" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="/1_files/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-tabbar__label">我的</p>
        </a>
    </div>
</div>

</body>

<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>

<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/swiper.min.js"></script>

<script>
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
    });
</script>

</html>

　　

　　

jqweui tabbar使用示例的更多相关文章

  1. 微信小程序 导航 4种页面跳转 详解

    1.wx.navigateTo   保留当前页面,跳转到应用内的某个页面,目前页面路径最多只能十层.  参数:url(可携带参数) .success .fail .complete 可用wxml代替: ...

  2. 微信小程序 路由跳转 异步请求 存储数据，微信登录接口

    1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...

  3. jqweui 中的tabbar导航

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

  4. Flutter 原生TabBar切换标签页示例

    效果图: 代码如下: import 'package:flutter/material.dart'; class TabsTestPage extends StatefulWidget { _Tabs ...

  5. 自定义子tabBar

    基本设置 设置APPIcon(直接拖图片) 设置启动图片 将launch Screen File里的LaunchScreen.xib给删掉 点击launch image source框内的Use As ...

  6. IOS 如何隐藏tabbar

    系统自带的UITabBarController有时候到不到要求,需要自定义样式. 有一种方法就是在TabBar上面在放一层自己的,正好把原来的遮住. 那么,从Tab进入子的Controller想要隐藏 ...

  7. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  8. app整体搭建环境：tabBar切换不同控制器的封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）

    首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...

  9. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

随机推荐

  1. JPEG编码（二）

    来自CSDN评论区http://bbs.csdn.net/topics/190980 1. 色彩模型 JPEG 的图片使用的是 YCrCb 颜色模型, 而不是计算机上最常用的 RGB. 关于色彩模型, ...

  2. 2017.6.8 spring-ldap基本使用总结

    之前学习过spring-ldap的官方文档:2017.4.10 spring-ldap官方文档学习 现在是对实际使用的spring-ldap及使用过程中遇到的问题,进行总结. 1.spring-lda ...

  3. 6. datasource - mysql【从零开始学Spring Boot】

    在任何一个平台都逃离不了数据库的操作,那么在spring boot中怎么接入数据库呢? 很简单,我们需要在application.properties进行配置一下,application.proper ...

  4. MySQL的左外连接

    代码: select t1.descid, IFNULL(t2.cnt,) as countnew, t1.description from uosdesc t1 left outer join t2 ...

  5. Oracle基础 自定义函数

    一.函数 函数与存储过程相似,也是数据库中存储的已命名PL-SQL程序块.函数的主要特征是它必须有一个返回值.通过return来指定函数的返回类型.在函数的任何地方可以通过return express ...

  6. (CF#257)A. Jzzhu and Children

    There are n children in Jzzhu's school. Jzzhu is going to give some candies to them. Let's number al ...

  7. 跨discuz站获取

    1.在需要取得formhash的页面加入下面js代码,还需要jquery库. <script lanuage="javascript"> $(function(){ $ ...

  8. nightwatch-js -- test group

    Test group 可以将你的测试脚本划分到组中,并根据需要运行它们.要将测试组合在一起,只需将它们放在相同的子文件夹中,文件夹的名字即是组的名字.例如:lib/├── selenium-serve ...

  9. 转：使用rsync在linux（服务端）与windows（客户端）之间同步

    转自:http://blog.csdn.net/old_imp/article/details/8826396 一 在linux(我用的是centos系统)上安装rsync和xinetd前先查看lin ...

  10. 原 [Android]LIstView的HeaderView

    目录[-] (1)添加HeaderView之后尺寸布局被忽略. (2)添加HeaderView之后导致OnItemClickListener的position移位 (3)LayoutInflater的 ...