<!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. 解决no declaration can be found for element 'context:component-scan'

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  2. Elasticsearch教程（二），IK分词器安装

    elasticsearch-analysis-ik  是一款中文的分词插件,支持自定义词库,也有默认的词库. 开始安装. 1.下载 下载地址为:https://github.com/medcl/ela ...

  3. 累加按钮，自加1&&输入两个数字，比较大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 渗透测试中的文件传输通道1- cmd下下载文件

    Set xPost = createObject("Microsoft.XMLHTTP")xPost.Open "GET","http://www.x ...

  5. 解决log4j.xml问题http//jakarta.apache.org/log4j/ uri is not registered

    在Eclipse中,配置log4j.xml出现"http //jakarta.apache.org/log4j/ uri is not registered"的错误信息. 原始的l ...

  6. mongo 游标

    游标是什么? 通俗的说游标不是查询结果,而是查询的返回资源,或者说是查询返回的接口. 通过这个接口,我们可以逐条读取数据. 就像php中我们使用fopen打开文件,得到的是一个资源,通过这个资源,我们 ...

  7. Unable to connect to a repository at URL 解决方法

    提示"Unable to connect to a repository at URL 'svn://localhost/project1/'" or “Can't connect ...

  8. SQL：OUTER JOIN使用方法具体解释

    SQL--JOIN使用方法 外联接. 外联接能够是左向外联接.右向外联接或完整外部联接.  在 FROM 子句中指定外联接时,能够由下列几组keyword中的一组指定: LEFT JOIN 或 LEF ...

  9. [分享]windows下编译squid的经验(转)

    squid是什么我这里就不说了,这不是本文的重点,总之它是一个集:代理.加速.缓存.负载均衡.防盗链.访问控制等多功能的一个超牛X开源软件,如今已经广泛应用于很多领域.对于缓存和加速这一领域,如今各大 ...

  10. Unity3d多人在线教程

    [转载]Unity3d多人在线教程 (2013-02-25 16:02:49) 转载▼ 标签: 转载   原文地址:Unity3d多人在线教程作者:lsy0031 Unity 多个玩家开发教程 Uni ...