<!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. 2017.6.30 使用git新建项目、仓库并拉取、提交代码

    1.在码云上新建一个项目rms 2.在本地指定位置新建仓库,生成.git文件夹 3.同步远程仓库,并拉取最新代码 远程仓库默认名为orgin.可以修改,这里就是用默认名了. 注意:这里使用ssh方式的 ...

  2. Android Socket通信编程

    安卓客户端通过socket与服务器端通讯一般可以按照以下几个步骤:(1).通过IP地址和端口实例化Socket,请求连接服务器:socket = new Socket(HOST, PORT); //h ...

  3. Angular 学习笔记——自定义指令

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  4. [经验总结]material design效果与开发总结

    首先贴一个參考过的文章,写的不错: 在低版本号android系统上实现Material design应用 以下是工作中总结出来的,列出了在<5.0的设备是怎样实现material design的 ...

  5. 苹果版小黄车(ofo)app主页菜单效果

    代码地址如下:http://www.demodashi.com/demo/12823.html 前言: 最近又是公司项目上线一段时间了,又是到了程序汪整理代码的节奏了.刚好也用到了ofo主页菜单的效果 ...

  6. iOS项目开发之仿网易彩票推荐应用

    简介 效果展示 思路分析 代码实现 Git地址 一.简介 某些公司有较多的产品时,通常会在一个产品中推广另外的一些产品,我简单的封装了一个UIControllerView,由于不同公司,要求不同.所以 ...

  7. zxing学习笔记 android入门

    对于刚开始学习android开发的童鞋们来说,若有一个简单而又全面的android工程能来剖析,那就是再好不过了,zxing就是不错得例子.    zxing的源码可以到google code上下载, ...

  8. VB中的排序问题 15个

    首次接触VB,以下就先进行VB中的排序问题                   Dim a As Integer Dim b As Integer Dim c As Integer Dim d As ...

  9. 微信公众号开发之创建菜单栏代码示例（php）

    思路很简单:就是先获取access_token,然后带着一定规则的json数据参数请求创建菜单的接口.废话不多讲,直接上代码. class Wechat { public $APPID="w ...

  10. Windows 10 优化

    ---恢复内容开始--- 0x00 使开始菜单,任务栏,和操作中心透明 --关闭 右下角开始菜单,选择设置,打开个性化菜单,找到颜色一栏.向下滑至最低端,使开始菜单,任务栏,和操作中心透明选项关闭 0 ...