jqweui tabbar使用示例

最新推荐文章于 2021-09-06 09:45:09 发布
最新推荐文章于 2021-09-06 09:45:09 发布
阅读量330 收藏
点赞数
原文链接：http://www.cnblogs.com/upup2015/p/7786716.html
版权 
<!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="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="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="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="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>

　　

　　

转载于:https://www.cnblogs.com/upup2015/p/7786716.html

weixin_30628077
关注
挖坑记录_Jquery-Weui weui-tabbar组件 沉底
CrazyMax_zh的博客
01-14 1271
今天使用JQuery-Weui 发现weui-tabbar 不沉底，查询了一下相关资料 ，要给父容器增加高度。问题解决； 另外，需要动态设置好每个DIV得高度 ，使父容器高度永远等于设备分辨率高度，并计算好每个DIV得高度使样式贴合 HTML： <div id="container"> <div class="title">订单列表</div> ...
微信小程序中weui用法解析
12-13
在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队...
mint-ui-tabbar示例
07-29
mint-ui-tabbar示例
jqweui 中的tabbar导航
weixin_33834910的博客
01-08 1097
最近做微信的服务号项目，用的jqweui作为主要的ui，但是对于用惯了ele ui的开发者来说，文档貌似有点不友好。真是很让人头疼！ 所以结合着自己做的项目，随便写一点东西。 比如说，tabbar导航的切换。官网给说的对应的文档如下图： 从我个人角度而言，实在不能短时间能看出来具体的用法。 还是直接晒一下用法吧！ 　　　　　　　　<div id="tab-home" ...
JQuery WEUI Tabbar 的坑
qq_43347905的博客
03-11 371
JQuery WEUI Tabbar 的坑 JQuery WEUI Tabbar 的坑 JQuery WeUi Tabbar 不在底部显示 其实就是因为 JQuery WeUI 没有定义 html, body 的高度，所以给其定义个 height: 100%; 就可以了！ 就像这样就行 <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min....
jqweui的picker插件动态加载数据
12-22
jqweui的picker动态加载数据 jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件。 如果是动态加载数据的话，可以把加载方法写成一个方法，数据是加载后返回的再填充。但是有一个问题，前台要求的数据一般是key,value的形式，而picker插件只能接收单列数组。我是这么解决的，把要显示的key作为一个数组返回，其他的属性创建一个对象数组存起来。
微信小程序 云开发版 tabbar demo示例
06-10
在这个"微信小程序 云开发版 tabbar demo示例"中，我们将深入探讨如何利用微信小程序的云开发功能和集成的iview-webapp UI框架来创建一个具有底部导航栏（tabbar）的应用。 首先，让我们关注“云开发”这一概念。云...
100 行代码实现Flutter自定义TabBar的示例代码
01-20
官方的 TabBar 不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义 TabBar…… 一、目标和效果 需求目标是： 这个页面不要 material 左侧统一的返回键和 Title 在右侧有取消按钮，点...
微信小程序之 tabBar 不显示
03-29
第一步，按照index创建了myBus第二步：更改app.json，即全局变量重点在于：最后：完成       第一步，按照index创建了myBus (此图片来源于网络，如有侵权，请联系删除! ) 第二步：更改app.json，即全局变量 ...
tab weui 页面切换_weui tabbar 切换
weixin_39569076的博客
01-17 130
.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color...
jquery-weui微信商城全套页面模板
12-22
使用jquery-weui开发的一整套移动端商城，包括首页，购物车，订单管理，评价，分类，会员中心等页面，分享给需要的人。
weui tabbar 切换
weixin_33804582的博客
12-27 2640
Html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
WeUI实现带图片的tab切换
沧海龙腾LV的博客
02-22 1684
tab图标命名方式：tab0.png，tab0_p.png, tab1.png, tab1_p.png, tab2.png, tab2_p.png…… html: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
weuieui使用详解
yshusencsdn的博客
11-20 463
weuieui使用详解下载weui库解压粘贴库到自己的项目使用完成了 下载weui库 解压 粘贴库到自己的项目 使用 完成了
WEUI的tabbar注意事项
热门推荐
大白能的博客
02-26 1万+
TabbarTabbar 是位于页面底部的导航，相当于 App 的Dock 栏，通过点击每个按钮切换页面的主体内容。Tabbar 的 class 为weui_tabbar， 一般嵌套在 weui_tab 内，weui_tab_bd 为 Tab 页面的主体内容，weui_tabbar_item 为 Tabbar 的一个一个的按钮，建议为 3~5 个，weui_tabbar_icon 为每个按钮的图标，
用WeUI 中的weui-tab 配合js实现weui-tab tabbar 页面切换切换功能
浮萍的博客
12-03 1万+
test &amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;tab1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;weui-tab__bd-item weui-tab__bd-item--active&amp;amp;amp;amp;quot;&amp;amp;amp
weui-tabbar使用
weixin_44189639的博客
12-05 3123
weui画页面 tabbar用法 <!doctype html> <html> <head> <meta charset="utf-8"> <title>总裁月报</title> <meta name="viewport" content="width=device-width,initial-s...
weui 1.1.2版本tabbar切换以及底部位置问题
菜鸡奋斗ing的博客
10-30 7837
突然发现这个weui好坑，居然有的功能还要自己写。还是我的姿势不正确？ tabbar底部未能正确显示在页面最底部，解决办法：在html,body元素加上style=”height:100%”即可解决。 tabbar解决切换页面demo代码↓:<script type="text/javascript"> $(function(){ $('.weui-tabbar__item').
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
weixin_52046784的博客
09-06 6279
在一个微信小程序中想要用到两种不同的tabbar样式，可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar { "navigationBarTitleText": "个人中心", "usingComponents": { "mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar" } } 在wxml文件中使用mp-tabbar，list代表的是显示的列表（文字、图标），current是
Flutter自定义TabBar实现：100行代码示例
"这篇文章主要介绍了如何使用Flutter自定义TabBar，包括实现目标、设计思路以及具体代码实现。作者指出Flutter的UI库生态尚不完善，因此需要自行创建满足特定需求的TabBar组件。" 在Flutter开发中，由于缺乏像前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值