使用WEUI快速搭建新闻列表页

BONE
354 阅读6分钟

前言

在现代网页设计中，UI组件库的使用可以显著提高开发效率并提升用户体验。WEUI（微信用户界面库）是专门为微信生态设计的UI库，具有简洁、优雅且易用的特点。今天我们将基于WEUI，快速搭建一个简单的新闻列表页面，来学习一下WEUI组件库的使用。

weixinuisheji01.png

新闻列表

在开发之前，我们可以通过 cdn 的方式先去引入 weui 组件库；

为了提高网页加载速度，我们使用了CDN（内容分发网络）来引入WEUI的CSS文件。CDN将文件存储在全球多个服务器上，用户可以从最近的服务器加载资源，从而显著提升页面加载速度。

<link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">

对于新闻列表页，我们可以分为以下三部分；

Navbar（导航栏）

导航栏通常用于在不同的内容或页面之间进行切换。在我们的新闻列表页中，使用导航栏来显示“推荐”、“热点”和“娱乐”三个不同的新闻分类。

chrome-capture-2024-8-7.gif

<div class="weui-navbar">
    <a href="#" class="weui-navbar__item weui-bar__item_on">推荐</a>
    <a href="#" class="weui-navbar__item">热点</a>
    <a href="#" class="weui-navbar__item">娱乐</a>
</div>

在这个导航栏中，weui-navbar__item类用于定义每个导航栏项的样式，而 weui-bar__item_on 是 WEUI 组件库中的一个用于导航栏的 CSS 类，它的作用是表示当前激活或选中的导航项。通过JavaScript，我们可以实现点击不同选项时的切换功能：

闭包实现：

    for (let i = 0; i < tabs.length; i++) {
        // 异步代码
        // 闭包解决  用闭包把迭代i的值储存起来
        (function(i){
            tabs[i].addEventListener('click',function() {
                if (this.classList.contains('weui-bar__item_on')) {
                     console.log('///');
                     return
                }

                // console.log(i);
                document
                    .querySelector('.weui-bar__item_on')
                    .classList
                    .remove('weui-bar__item_on')
                this.classList.add('weui-bar__item_on')
            })
        })(i)
    }

上面这段代码，通过闭包技术保证了每次循环中为元素添加的事件监听器都能访问到正确的索引值，并实现了点击事件处理逻辑，使得每次点击时，只有被点击的元素处于激活状态，而其他元素则会被取消激活状态。

但是，在每次循环中都会创建一个新的闭包，这可能会有轻微的性能开销；对此我们还能通过 .addEventListener 方法的事件冒泡机制来优化内存。

事件冒泡机制：

<!-- 为navbar元素添加点击事件监听器 -->
navbar.addEventListener('click', function(event) {
    // 获取点击事件的目标元素
    const target = event.target;
    // 检查`target`元素是否是一个`<a>`标签
    if(target.nodeName == 'A') {   
        // 阻止A标签的默认跳转行为
        event.preventDefault();
        /**  
         *  检查目标元素是否已经包含了'weui-bar__item_on'类名
         *  如果存在，函数直接返回，不执行任何操作
         */
        if (target.classList.contains('weui-bar__item_on')) {    
            return;
        }
        // 移除当前激活的菜单项的'weui-bar__item_on'类名
        document
           .querySelector('.weui-bar__item_on')
           .classList  
           .remove('weui-bar__item_on')  
        // 为当前点击的菜单项添加'weui-bar__item_on'类名，使其激活
        target.classList.add('weui-bar__item_on'); 
    }
})

事件委托：将事件监听器绑定在父元素（例如navbar）上，避免为每个子元素（如导航栏项）分别绑定事件监听器，从而减少了内存消耗。

上面代码的分析如下：

  1. 注册事件监听器：为navbar元素添加一个点击事件监听器。
  2. 获取点击目标：当点击事件发生时，获取被点击的元素。
  3. 检查元素类型：确认被点击的元素是否为<a>标签。
  4. 阻止默认行为：如果是<a>标签，则阻止其默认的跳转行为。
  5. 检查激活状态：判断该<a>标签是否已有weui-bar__item_on类名，如果有则不做任何操作。
  6. 移除旧激活状态：如果没有该类名，则先移除当前具有weui-bar__item_on类名的元素的这个类名。
  7. 设置新激活状态：最后，为当前点击的<a>标签添加weui-bar__item_on类名，使其成为新的“激活”项。

Searchbar（搜索栏）

搜索栏是用户快速查找内容的重要工具。在我们的示例中，使用WEUI提供的搜索栏组件：

<div class="weui-search-bar" id="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" placeholder="搜索" id="search_input">
            <a href="#" class="weui-icon-clear"></a>
        </div>
        <label id="search_text" for="search_input" class="weui-search-bar__label">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="#" class="weui-search-bar__cancel-btn">取消</a>
</div>

在实现搜索功能时，点击搜索框可以将搜索栏激活。通过添加以下JavaScript代码，我们可以实现点击激活和取消的效果：

// 通过类名选择器获取搜索框的标签元素
const searchBarLabel = document.querySelector('.weui-search-bar__label');
// 为搜索框的标签元素添加点击事件监听器
searchBarLabel.addEventListener('click', function() {
	// 通过类名选择器获取搜索框的容器元素
	const searchBar = document.querySelector('.weui-search-bar');
	// 为搜索框的容器元素添加指定的类名
	searchBar.classList.add('weui-search-bar_focusing');
});
// 通过类名选择器获取搜索框的取消按钮元素
const searchBarCancelBtn= document.querySelector('.weui-search-bar__cancel-btn');
// 为搜索框的取消按钮元素添加点击事件监听器
searchBarCancelBtn.addEventListener('click', function() {
	// 通过类名选择器获取搜索框的容器元素
	const searchBar = document.querySelector('.weui-search-bar');
	// 为搜索框的容器元素移除指定的类名
	searchBar.classList.remove('weui-search-bar_focusing');
});

WEUI在设计时考虑了无障碍浏览功能，确保不同用户群体（包括视力障碍者）也能使用。具体措施包括：

  • 读屏器支持：通过label标签绑定input元素，确保屏幕阅读器能够识别并朗读标签内容。这对于盲人用户尤其重要。
  • 搜索栏设计：在搜索栏中，label和input通过for和id关联起来，使得读屏器可以正确读取搜索功能的提示信息。

代码实现：

  1. 聚焦搜索框：

    • 通过类名选择器获取搜索框标签元素（.weui-search-bar__label）。
    • 为搜索框标签元素添加点击事件监听器。
    • 在点击事件触发时，获取搜索框的容器元素（.weui-search-bar），并为其添加类名weui-search-bar_focusing，这通常会导致搜索框显示聚焦状态的样式变化。

  2. 取消聚焦搜索框：

    • 通过类名选择器获取搜索框的取消按钮元素（.weui-search-bar__cancel-btn）。
    • 为取消按钮元素添加点击事件监听器。
    • 在点击事件触发时，获取搜索框的容器元素（.weui-search-bar），并移除类名weui-search-bar_focusing，这通常会使搜索框恢复到非聚焦状态。

chrome-capture-2024-8-7.gif

News-List（新闻列表）

新闻列表可以通过动态加载新闻内容，来构建一个完整的新闻列表页面。每个新闻条目可以使用WEUI的列表组件实现，代码示例如下：

<div class="weui-cells">
    <a class="weui-cell weui-cell_access" href="#">
        <div class="weui-cell__bd">
            <p>新闻标题1</p>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
    <a class="weui-cell weui-cell_access" href="#">
        <div class="weui-cell__bd">
            <p>新闻标题2</p>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
</div>

小结

通过使用WEUI，我们可以快速构建出简洁、美观且功能丰富的新闻列表页面。同时，借助无障碍设计和性能优化技巧，我们能够确保所有用户群体都能顺畅地使用该页面，并且页面响应迅速。如果觉得有用的话，可以点点赞哟。

avatar
文章
阅读
粉丝