三、核心组件详解

3.1 表单类组件
表单是用户与应用交互的核心，WeUI 提供了完整的表单组件体系。

3.1.1 按钮组件
按钮是 WeUI 中最基础的交互元素，提供了多种视觉变体：

<!-- 主要操作按钮（绿色） -->
<button class="weui-btn weui-btn_primary">主要按钮</button>

<!-- 次要操作按钮（灰色） -->
<button class="weui-btn weui-btn_default">默认按钮</button>

<!-- 警示操作按钮（红色） -->
<button class="weui-btn weui-btn_warn">警告按钮</button>

<!-- 小尺寸按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_mini">小按钮</button>

<!-- 禁用按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_disabled">禁用按钮</button>

<!-- 加载中按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i> 加载中
</button>

按钮状态说明：

主要按钮（绿色）：用于页面的主要操作，如“提交”、“确认”

默认按钮（灰色）：用于次要操作，如“取消”、“返回”

警示按钮（红色）：用于危险操作，如“删除”、“注销”

3.1.2 输入框组件
输入框是表单中的核心元素，WeUI 提供了多种输入框样式：

<!-- 标准输入框 -->
<div class="weui-cell">
    <div class="weui-cell__hd">
        <label class="weui-label">用户名</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请输入用户名">
    </div>
</div>

<!-- 带验证状态的输入框 -->
<div class="weui-cell weui-cell_warn">
    <div class="weui-cell__hd">
        <label class="weui-label">手机号</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="tel" placeholder="请输入手机号">
    </div>
    <div class="weui-cell__ft">
        <i class="weui-icon-warn"></i>
    </div>
</div>

<!-- 文本域 -->
<div class="weui-cell">
    <div class="weui-cell__bd">
        <textarea class="weui-textarea" placeholder="请输入详细描述" rows="3"></textarea>
        <div class="weui-textarea-counter">0/200</div>
    </div>
</div>

<!-- 带前缀/后缀的输入框 -->
<div class="weui-cell">
    <div class="weui-cell__hd">
        <label class="weui-label">金额</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="number" placeholder="0.00">
    </div>
    <div class="weui-cell__ft">
        元
    </div>
</div>

输入框结构说明：

weui-cell：表单项容器

weui-cell__hd：标签区域

weui-label：标签文本

weui-cell__bd：输入区域

weui-input：输入框样式

weui-cell__ft：右侧附加区域（图标、提示等）

weui-cell_warn：警告状态的样式修饰

3.1.3 列表表单
列表表单用于展示多个表单项的组合：

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">姓名</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入姓名">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">邮箱</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="email" placeholder="请输入邮箱">
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
            <button class="weui-vcode-btn">获取验证码</button>
        </div>
    </div>
</div>

3.1.4 选择器

<!-- 单选框组 -->
<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label" for="radio1">
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio" id="radio1" checked>
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="radio2">
        <div class="weui-cell__bd">
            <p>选项二</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio" id="radio2">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
</div>

<!-- 复选框组 -->
<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="checkbox1">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" id="checkbox1">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="checkbox2">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" id="checkbox2">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选项二</p>
        </div>
    </label>
</div>

<!-- 开关 -->
<div class="weui-cell weui-cell_switch">
    <div class="weui-cell__bd">接收通知</div>
    <div class="weui-cell__ft">
        <input class="weui-switch" type="checkbox">
    </div>
</div>

<!-- 滑块 -->
<div class="weui-cell">
    <div class="weui-cell__bd">音量</div>
    <div class="weui-cell__ft">
        <input class="weui-slider" type="range" min="0" max="100" value="50">
    </div>
</div>

3.2 基础组件
3.2.1 图标组件
WeUI 内置了丰富的图标，覆盖了常见的状态和操作场景：

<!-- 成功图标 -->
<i class="weui-icon-success"></i>
<i class="weui-icon-success-no-circle"></i>

<!-- 提示图标 -->
<i class="weui-icon-info"></i>
<i class="weui-icon-info-circle"></i>

<!-- 警告图标 -->
<i class="weui-icon-warn"></i>

<!-- 等待/加载图标 -->
<i class="weui-icon-waiting"></i>
<i class="weui-icon-waiting-circle"></i>

<!-- 安全提示图标 -->
<i class="weui-icon-safe"></i>
<i class="weui-icon-safe-success"></i>

<!-- 取消/关闭图标 -->
<i class="weui-icon-cancel"></i>

<!-- 搜索图标 -->
<i class="weui-icon-search"></i>

<!-- 清除图标 -->
<i class="weui-icon-clear"></i>

<!-- 返回图标 -->
<i class="weui-icon-back"></i>

<!-- 更多图标 -->
<i class="weui-icon-more"></i>

图标使用场景：

weui-icon-success：操作成功提示

weui-icon-warn：警告或错误提示

weui-icon-info：普通信息提示

weui-icon-waiting：等待状态提示

weui-icon-search：搜索框占位符

weui-icon-clear：清空输入内容

3.2.2 Flex 布局
WeUI 提供了基于 Flexbox 的布局工具类：

<!-- 水平布局 -->
<div class="weui-flex">
    <div class="weui-flex__item">弹性项目1</div>
    <div class="weui-flex__item">弹性项目2</div>
    <div class="weui-flex__item">弹性项目3</div>
</div>

<!-- 垂直布局 -->
<div class="weui-flex weui-flex_column">
    <div>项目1</div>
    <div>项目2</div>
    <div>项目3</div>
</div>

<!-- 两端对齐 -->
<div class="weui-flex weui-flex_justify-between">
    <div>左</div>
    <div>中</div>
    <div>右</div>
</div>

<!-- 居中对齐 -->
<div class="weui-flex weui-flex_align-center">
    <div>内容会自动垂直居中</div>
</div>

<!-- 等分布局 -->
<div class="weui-flex">
    <div class="weui-flex__item">1/3</div>
    <div class="weui-flex__item">1/3</div>
    <div class="weui-flex__item">1/3</div>
</div>

3.2.3 网格布局

<!-- 三列网格 -->
<div class="weui-grids">
    <a href="#" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon1.png" alt="">
        </div>
        <p class="weui-grid__label">网格1</p>
    </a>
    <a href="#" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon2.png" alt="">
        </div>
        <p class="weui-grid__label">网格2</p>
    </a>
    <!-- 更多网格... -->
</div>

3.3 操作反馈组件
3.3.1 对话框（Dialog）
Dialog 用于需要用户确认的重要操作：

<div class="weui-dialog" id="dialog">
    <div class="weui-dialog__hd">
        <strong class="weui-dialog__title">提示</strong>
    </div>
    <div class="weui-dialog__bd">
        确定要删除这条数据吗？此操作不可恢复。
    </div>
    <div class="weui-dialog__ft">
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
    </div>
</div>

<script>
// 显示对话框
document.getElementById('dialog').style.display = 'block';

// 隐藏对话框
function hideDialog() {
    document.getElementById('dialog').style.display = 'none';
}
</script>

3.3.2 提示框（Toast）
Toast 用于显示轻量级的操作反馈，通常 2-3 秒后自动消失：

<!-- 成功提示 -->
<div class="weui-toast">
    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
    <p class="weui-toast__content">操作成功</p>
</div>

<!-- 失败提示 -->
<div class="weui-toast">
    <i class="weui-icon-warn weui-icon_toast"></i>
    <p class="weui-toast__content">操作失败</p>
</div>

<!-- 加载提示 -->
<div class="weui-toast">
    <i class="weui-loading weui-icon_toast"></i>
    <p class="weui-toast__content">加载中</p>
</div>

<!-- 纯文字提示 -->
<div class="weui-toast">
    <p class="weui-toast__content">仅文字提示</p>
</div>

<script>
// 动态显示 Toast 的函数
function showToast(message, type = 'success') {
    const toastHtml = `
        <div class="weui-toast" style="display: flex; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
            <i class="weui-icon-${type === 'success' ? 'success-no-circle' : 'warn'} weui-icon_toast"></i>
            <p class="weui-toast__content">${message}</p>
        </div>
    `;
    const toast = document.createElement('div');
    toast.innerHTML = toastHtml;
    document.body.appendChild(toast);

    setTimeout(() => {
        document.body.removeChild(toast);
    }, 2000);
}
</script>

3.3.3 操作表（ActionSheet）
ActionSheet 从底部弹出，提供多个操作选项：

<div class="weui-actionsheet" id="actionSheet">
    <div class="weui-actionsheet__title">
        <p class="weui-actionsheet__title-text">请选择操作</p>
    </div>
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" data-value="share">分享给朋友</div>
        <div class="weui-actionsheet__cell" data-value="copy">复制链接</div>
        <div class="weui-actionsheet__cell" data-value="delete">删除</div>
    </div>
    <div class="weui-actionsheet__action">
        <div class="weui-actionsheet__cell" data-value="cancel">取消</div>
    </div>
</div>

<script>
function showActionSheet(callback) {
    const sheet = document.getElementById('actionSheet');
    const mask = document.createElement('div');
    mask.className = 'weui-mask';
    mask.style.display = 'block';
    document.body.appendChild(mask);
    sheet.style.transform = 'translate(0, 0)';

    const cells = sheet.querySelectorAll('.weui-actionsheet__cell');
    cells.forEach(cell => {
        cell.onclick = () => {
            mask.remove();
            sheet.style.transform = '';
            if (callback) callback(cell.dataset.value);
        };
    });
}
</script>

3.4 导航组件
3.4.1 顶部导航栏

<div class="weui-navbar">
    <div class="weui-navbar__item weui-bar__item_on" data-tab="tab1">
        选项一
    </div>
    <div class="weui-navbar__item" data-tab="tab2">
        选项二
    </div>
    <div class="weui-navbar__item" data-tab="tab3">
        选项三
    </div>
</div>

<!-- 对应的内容面板 -->
<div class="weui-tab__panel">
    <div class="weui-tab__content" id="tab1" style="display: block;">内容一</div>
    <div class="weui-tab__content" id="tab2" style="display: none;">内容二</div>
    <div class="weui-tab__content" id="tab3" style="display: none;">内容三</div>
</div>

<script>
// 标签页切换
document.querySelectorAll('.weui-navbar__item').forEach(item => {
    item.addEventListener('click', function() {
        const tabId = this.dataset.tab;
        // 切换导航栏选中状态
        document.querySelectorAll('.weui-navbar__item').forEach(nav => {
            nav.classList.remove('weui-bar__item_on');
        });
        this.classList.add('weui-bar__item_on');
        // 切换内容面板
        document.querySelectorAll('.weui-tab__content').forEach(content => {
            content.style.display = 'none';
        });
        document.getElementById(tabId).style.display = 'block';
    });
});
</script>

3.4.2 底部标签栏

<div class="weui-tabbar">
    <a href="#" class="weui-tabbar__item weui-bar__item_on">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_home.png" alt="">
        </div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="#" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_find.png" alt="">
        </div>
        <p class="weui-tabbar__label">发现</p>
    </a>
    <a href="#" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_notify.png" alt="">
        </div>
        <p class="weui-tabbar__label">通知</p>
    </a>
    <a href="#" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_profile.png" alt="">
        </div>
        <p class="weui-tabbar__label">我的</p>
    </a>
</div>

3.4.3 面包屑导航

<div class="weui-breadcrumb">
    <a href="#" class="weui-breadcrumb__link">首页</a>
    <span class="weui-breadcrumb__sep">&gt;</span>
    <a href="#" class="weui-breadcrumb__link">产品中心</a>
    <span class="weui-breadcrumb__sep">&gt;</span>
    <span class="weui-breadcrumb__current">当前页面</span>
</div>

3.5 数据展示组件
3.5.1 列表（Cells）
列表是 WeUI 中最常用的数据展示组件：

<!-- 基础列表 -->
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>列表项1</p>
        </div>
        <div class="weui-cell__ft">
            详细信息
        </div>
    </div>
    <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <p>可点击列表项</p>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access">
        </div>
    </div>
    <div class="weui-cell weui-cell_swiped">
        <div class="weui-cell__bd">
            <p>可滑动列表项</p>
        </div>
        <div class="weui-cell__ft">
            <a href="#" class="weui-swiped-btn">删除</a>
        </div>
    </div>
</div>

<!-- 带头像的列表 -->
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <img src="./images/avatar.jpg" style="width: 40px; height: 40px; border-radius: 50%;">
        </div>
        <div class="weui-cell__bd">
            <p>张三</p>
            <p class="weui-cell__desc">这里是描述信息</p>
        </div>
        <div class="weui-cell__ft">昨天</div>
    </div>
</div>

3.5.2 面板（Panel）
面板用于组合展示相关内容：

<div class="weui-panel">
    <div class="weui-panel__hd">面板标题</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">标题</h4>
            <p class="weui-media-box__desc">描述内容，这里是一段简短的描述文字。</p>
        </div>
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">另一个标题</h4>
            <p class="weui-media-box__desc">另一段描述内容。</p>
        </div>
    </div>
    <div class="weui-panel__ft">
        <a href="#" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>
    </div>
</div>

<!-- 图文面板 -->
<div class="weui-panel">
    <div class="weui-panel__hd">热门推荐</div>
    <div class="weui-panel__bd">
        <a href="#" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="./images/thumb.jpg" alt="">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">文章标题</h4>
                <p class="weui-media-box__desc">文章描述...</p>
            </div>
        </a>
    </div>
</div>

3.5.3 卡片

<div class="weui-card">
    <div class="weui-card__header">
        <div class="weui-card__header-title">卡片标题</div>
        <div class="weui-card__header-extra">更多</div>
    </div>
    <div class="weui-card__body">
        <p>卡片内容区域，可以放置任意 HTML 内容。</p>
    </div>
    <div class="weui-card__footer">
        <div class="weui-card__footer-item">点赞</div>
        <div class="weui-card__footer-item">评论</div>
        <div class="weui-card__footer-item">分享</div>
    </div>
</div>

3.6 搜索组件

<!-- 搜索栏 -->
<div class="weui-search-bar">
    <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>

<script>
// 搜索栏交互逻辑
const searchBar = document.querySelector('.weui-search-bar');
const searchInput = document.getElementById('searchInput');
const searchCancel = document.getElementById('searchCancel');
const searchClear = document.getElementById('searchClear');

searchInput.addEventListener('focus', () => {
    searchBar.classList.add('weui-search-bar_focusing');
});

searchCancel.addEventListener('click', () => {
    searchBar.classList.remove('weui-search-bar_focusing');
    searchInput.value = '';
});

searchClear.addEventListener('click', () => {
    searchInput.value = '';
    searchInput.focus();
});
</script>

来源：
http://qcycj.cn

前端组件库 ——WeUI 知识点大全（二）

三、核心组件详解

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

前端组件库 ——WeUI 知识点大全（二）

三、核心组件详解

热门文章

最新文章

相关电子书