jqweui tabbar使用示例
<!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使用示例的更多相关文章
- 微信小程序 导航 4种页面跳转 详解
1.wx.navigateTo 保留当前页面,跳转到应用内的某个页面,目前页面路径最多只能十层. 参数:url(可携带参数) .success .fail .complete 可用wxml代替: ...
- 微信小程序 路由跳转 异步请求 存储数据，微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...
- jqweui 中的tabbar导航
最近做微信的服务号项目,用的jqweui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航 ...
- Flutter 原生TabBar切换标签页示例
效果图: 代码如下: import 'package:flutter/material.dart'; class TabsTestPage extends StatefulWidget { _Tabs ...
- 自定义子tabBar
基本设置 设置APPIcon(直接拖图片) 设置启动图片 将launch Screen File里的LaunchScreen.xib给删掉 点击launch image source框内的Use As ...
- IOS 如何隐藏tabbar
系统自带的UITabBarController有时候到不到要求,需要自定义样式. 有一种方法就是在TabBar上面在放一层自己的,正好把原来的遮住. 那么,从Tab进入子的Controller想要隐藏 ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- app整体搭建环境：tabBar切换不同控制器的封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）
首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
随机推荐
- Hive图形化界面客户端
通过JDBC连接HiveServer2的图形界面工具,包括:SQuirrel SQL Client.Oracle SQL Developer以及DbVisualizer SQuirrel SQL Cl ...
- 2017.9.15 postgres使用postgres_fdw实现跨库查询
postgres_fdw的使用参考来自:https://my.oschina.net/Kenyon/blog/214953 postgres跨库查询可以通过dblink或者postgres_fdw来完 ...
- [PIC32--IDE]使用MPLAB IDE调试
问题描写叙述 安装好MPLAB IDE后,就能够用来调试自己的PIC32板子,用于应用的开发了. 开发板 手边使用的是Microchip的PIC32 Ethernet Starter Kit II的小 ...
- 偶遇 smon 进程cpu 开销高异常分析
今天突然发现线上一台oracle 数据库 servercpu 跑的非常高.感觉不是非常正常,细致看了下.发现是smon 进程吃掉了一个cpu. 那么这个smon 进程究竟在倒腾啥玩意 对smon 进程 ...
- TCP/IP详解 卷一（第十七章 TCP:传输控制协议）
与UDP协议相比,TCP提供一种面向连接的.可靠的字节流服务. TCP首部 跟UDP一样,TCP数据被封装在一个IP数据报中,下面显示TCP的首部数据格式 每个TCP段都包含源端和目的端的端口号,用于 ...
- Chrome 完整版官方下载
Chrome下载默认不是完整版本,需要长久等等.so... 在下载地址后加参数:?standalone=1 解决问题.
- EFFECTIVE JAVA 类和接口
第十六条:复合优先于继承 //这是一个不好的类---执行的结果 addCount = 4(addAll的实现依赖于HashSet的add方法,InstrumentHashSet方法重写了add方法有执 ...
- Hibernate核心类和接口具体介绍
一.hiobernate核心类和接口预览图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGxnZW4xNTczODc=/font/5a6L5L2T/fo ...
- svn上传代码时出现：Authorization failed
出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.conf:[general]anon-access = readauth-access = writepassword-d ...
- Java编程手冊-Collection框架（上）
该文章所讲内容基本涵盖了Collection里面的全部东西,尽管基于jdk 1.5的.可是思路非常清晰 1.引言 1.1 Collection框架的介绍 尽管我们能够使用数组去存储具有同样类型的元素集 ...