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 ...
随机推荐
- Spring中如何配置事务
学过SSH的都知道,整合了SSH之后,SSH的经典增删改查案例业务逻辑层的代码就十分简单.基本上都是一句话的事. public void addUser(Webuserlogin user) { // ...
- JAVA Eclipse如何重新设置工作空间workspace
窗口-首选项-常规-启动和关闭,勾选启动时提示工作空间,然后移除现有的工作空间,最好也勾选启动时刷新工作空间 重启之后就可以设置工作空间了
- Transform.eulerAngles 欧拉角
var eulerAngles : Vector3 Description描述 The rotation as Euler angles in degrees. 旋转作为欧拉角度. The x, y, ...
- Laravel之Eloquent ORM关联
一.一对一 1.主对从(hasOne) 从User模型中取出用户的手机 User模型中: /** * 获取关联到用户的手机 */ public function phone() { return $t ...
- Fragment简单用法
一.示意图 二.新建一个左侧碎片布局left_fragment.xml <LinearLayout xmlns:android="http://schemas.android.com/ ...
- uva507 - Jill Rides Again(最长连续和)
option=com_onlinejudge&Itemid=8&page=show_problem&problem=448">题目:uva507 - Jill ...
- JavaScript target与currentTarget区别
1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- Docker: devicemapper fix for “device or resource busy” (EBUSY) Cannot start container
受众:本文适用于熟悉码头工作的人员,并希望解决使用devicemapper存储/图形驱动程序时遇到的特定问题. 概述:虽然这不是专门用于设计师的问题,但是目前参与此驱动程序的技术人员会受到此影响. 使 ...
- devpress grid表格自适应列宽的问题
/// <summary> /// 自适应列宽,显示横向滚轴,只有当所有列都已经在界面上加载完成之后才能生效 /// </summary> public void setAut ...
- nginx 根据参数选择文档根目录
server { listen 80; server_name testmanage.h5.91wan.com; index index.html index.htm ...