<!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. Spring中如何配置事务

    学过SSH的都知道,整合了SSH之后,SSH的经典增删改查案例业务逻辑层的代码就十分简单.基本上都是一句话的事. public void addUser(Webuserlogin user) { // ...

  2. JAVA Eclipse如何重新设置工作空间workspace

    窗口-首选项-常规-启动和关闭,勾选启动时提示工作空间,然后移除现有的工作空间,最好也勾选启动时刷新工作空间   重启之后就可以设置工作空间了  

  3. Transform.eulerAngles 欧拉角

    var eulerAngles : Vector3 Description描述 The rotation as Euler angles in degrees. 旋转作为欧拉角度. The x, y, ...

  4. Laravel之Eloquent ORM关联

    一.一对一 1.主对从(hasOne) 从User模型中取出用户的手机 User模型中: /** * 获取关联到用户的手机 */ public function phone() { return $t ...

  5. Fragment简单用法

    一.示意图 二.新建一个左侧碎片布局left_fragment.xml <LinearLayout xmlns:android="http://schemas.android.com/ ...

  6. uva507 - Jill Rides Again（最长连续和）

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=448">题目:uva507 - Jill ...

  7. JavaScript target与currentTarget区别

    1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  8. Docker: devicemapper fix for “device or resource busy” (EBUSY) Cannot start container

    受众:本文适用于熟悉码头工作的人员,并希望解决使用devicemapper存储/图形驱动程序时遇到的特定问题. 概述:虽然这不是专门用于设计师的问题,但是目前参与此驱动程序的技术人员会受到此影响. 使 ...

  9. devpress grid表格自适应列宽的问题

    /// <summary> /// 自适应列宽,显示横向滚轴,只有当所有列都已经在界面上加载完成之后才能生效 /// </summary> public void setAut ...

  10. nginx 根据参数选择文档根目录

    server  {    listen       80;    server_name  testmanage.h5.91wan.com;    index index.html index.htm ...