weui使用（weui tabbar 到底怎么用啊tab页面为什么不能切换）

本文目录

• weui tabbar 到底怎么用啊tab页面为什么不能切换
• 微信小程序使用weui怎么只有样式功能却用不了
• 小程序引入weui使用步骤
• 小程序引入weui、修改weui样式
• 如何利用weui作为前端来开发

weui tabbar 到底怎么用啊tab页面为什么不能切换

在iOS的程序中，TabBar的使用率很高，几个视图需要切换的时候，就用到tabbar。今天的程序实现的效果是这样的，底部有几个tabItem，对应的有几个视图，切换tabItem，切换到对应的视图。为了更好理解使用用tabbar和切换视图

微信小程序使用weui怎么只有样式功能却用不了

方法/步骤

• 下载 weui.wxss

  请点击输入图片描述

• 解压缩文件，可以看到如下文件

  请点击输入图片描述

• 打开开发者工具，新建一个项目

  请点击输入图片描述

• 下面的小程序初始化的文件内容及结构

  请点击输入图片描述

• 找到上述文件dist/style目录下weui.wxss

  请点击输入图片描述

• 将weui.wxss放到小程序项目的更目录下

  请点击输入图片描述

• 引用weui.wxss，在app.wxss引入

  请点击输入图片描述

• 实验weui.wsxx

  请点击输入图片描述

• 查看效果，此时说明我们的样式已经引用成功。

  请点击输入图片描述

小程序引入weui使用步骤

第一步：
在app.json中，设置
"useExtendedLib":{
"weui": true
}
第二步：
在对应需要使用组件的页面json文件中，引入，例如引入弹框组件
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
第三步：在对应wxmll文件中，引入结构
《mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{}}"》
《view》test content《/view》
《/mp-dialog》

小程序引入weui、修改weui样式

引入weui:
在app.json里添加

在需要使用weui的页面的json文件里引入要使用的组件

修改weui样式
在需要修改的页面的js里添加externalClasses:

在组件上添加在externalClasses里写的类名

如何利用weui作为前端来开发

先引用样式文件. 请在github上下载对应的文件.
下载地址为: 3次未审核, 搜索吧.
下载之后的目录结构为:
dist : 编译之后的目录, 里面的文件可以直接使用
src : 源码目录
可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法.
打开example目录下的index.html 就可以看到官方的例子了.
这里需要说明一下, 这个官方使用的zepto.js框架. 这个框架更加适用移动端.
开始使用, 如果使用呢? 第一步先把css文件引用到页面中.
《link rel="stylesheet" type="text/css" href="路径地址" /》
然后, 就可以使用官方的样式了. 首先来说明一下button.
使用方法:class="weui_btn weui_btn_primary"
其中属性有:
weui_btn weui_btn_primary
weui_btn weui_btn_warn
weui_btn weui_btn_default
三种, 如果你想扩展, 直接增加响应的样式就可以了.
Tab使用:
tab包含两种: navbar 和 tabbar
使用方法.
navbar :
《div class="weui_tab"》
《div class="weui_navbar"》
《div class="weui_navbar_item weui_bar_item_on"》 选项一《/div》
《div class="weui_navbar_item"》 选项二 《/div》
《div class="weui_navbar_item"》选项三 《/div》
《/div》
《div class="weui_tab_bd"》《/div》
《/div》
weui_bar_item_on 为选中项
tabbar:
《div class="weui_tabbar"》
《a href="javascript:;" class="weui_tabbar_item weui_bar_item_on"》
《div class="weui_tabbar_icon"》
《img src="./images/icon_nav_button.png" alt=""》
《/div》
《p class="weui_tabbar_label"》微信《/p》
《/a》
《a href="javascript:;" class="weui_tabbar_item"》
《div class="weui_tabbar_icon"》
《img src="./images/icon_nav_msg.png" alt=""》
《/div》
《p class="weui_tabbar_label"》通讯录《/p》
《/a》
《a href="javascript:;" class="weui_tabbar_item"》
《div class="weui_tabbar_icon"》
《img src="./images/icon_nav_article.png" alt=""》
《/div》
《p class="weui_tabbar_label"》发现《/p》
《/a》
《a href="javascript:;" class="weui_tabbar_item"》
《div class="weui_tabbar_icon"》
《img src="./images/icon_nav_cell.png" alt=""》
《/div》
《p class="weui_tabbar_label"》我《/p》
《/a》
《/div》
图片来自官方例子中的素材.
Toast
弹出层: 一个是弹出提示数据.
《div id="toast"》
《div class="weui_mask_transparent"》《/div》
《div class="weui_toast"》
《i class="weui_icon_toast"》《/i》
《p class="weui_toast_content"》已完成《/p》
《/div》
《/div》
使用$(’#toast’).show();进行显示数据.
searchBar搜索框
简单的搜索, 搜索世界的大不同, 不是所有的网站都可以
图标的使用.
《i class="weui_icon_msg weui_icon_success"》《/i》
《i class="weui_icon_msg weui_icon_info"》《/i》
《i class="weui_icon_msg weui_icon_warn"》《/i》
《i class="weui_icon_msg weui_icon_waiting"》《/i》
《i class="weui_icon_safe weui_icon_safe_success"》《/i》
《i class="weui_icon_safe weui_icon_safe_warn"》《/i》
Panel的使用
《div class="weui_panel weui_panel_access"》
《div class="weui_panel_hd"》图文组合列表《/div》
《div class="weui_panel_bd"》
《a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"》
《div class="weui_media_hd"》
《img class="weui_media_appmsg_thumb" src="" alt=""》
《/div》
《div class="weui_media_bd"》
《h4 class="weui_media_title"》标题一《/h4》
《p class="weui_media_desc"》由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。《/p》
《/div》
《/a》
《a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"》
《div class="weui_media_hd"》
《img class="weui_media_appmsg_thumb" src="" alt=""》
《/div》
《div class="weui_media_bd"》
《h4 class="weui_media_title"》标题二《/h4》
《p class="weui_media_desc"》由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。《/p》
《/div》
《/a》
《/div》
《a class="weui_panel_ft" href="javascript:void(0);"》查看更多《/a》
《/div》
图片里面没有填写地址, 请您自己填写信息.