基于WEUI快速搭建新闻列表页

牛马先生
457 阅读6分钟

基于WEUI快速搭建新闻列表页，旨在利用微信官方提供的WEUI组件库来创建一个既美观又易用的移动Web界面，特别关注于提升用户体验和无障碍访问能力。下面我们将详细介绍如何实现这一目标，涵盖组件使用、代码示例、无障碍设计实践、以及js详解，希望对你有帮助。👓

合适的组件

为了找到合适的WEUI组件并高效地使用它们来搭建新闻列表页，我们必须先得知道新闻列表页所需的组件，并在WEUI库中通过查看文档，快速了解哪些组件才最适合我们项目的要求。接着在网页的检查当中可以直接复制下来所需的代码内容。

  • 导航需求：需要底部导航栏（Tabbar）来切换不同类别的新闻。
  • 搜索功能：是否需要集成搜索栏（Searchbar），让用户能搜索特定新闻。
  • 内容展示：新闻列表如何展示，需要包含图片、摘要、发布时间等元素。
  • 交互细节：考虑页面的交互逻辑，如点击新闻进入详情页、加载更多新闻等。

1. Tabbar 导航栏

WEUI的Tabbar组件为应用底部提供了一个直观的导航选项。可以通过定义不同的tab项来引导用户访问不同的新闻分类。确保每个tab项都有清晰的文字标签，并且可以通过触摸或点击轻松切换。

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

2. Searchbar 搜索栏

WEUI的Searchbar组件为用户提供了一种便捷的方式来搜索新闻内容。确保Searchbar具有明确的aria-label属性，以支持屏幕阅读器用户。

 <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>
        
    </form>
    <a href="" class="weui-search-bar__cancel-btn">取消</a>
</div>

3. List 列表组件

利用WEUI的列表组件展示新闻条目，确保每条新闻都有清晰的标题、摘要和可访问的链接。

<ul class="weui-media-box__list">
    <li>
        <a href="#" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="news-image-url.jpg">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">新闻标题</h4>
                <p class="weui-media-box__desc">新闻摘要</p>
            </div>
        </a>
    </li>
</ul>

4. 页面展示

image.png

最后我们得到了这样一个新闻列表页面，这里的搜索框和我们平时看到的大有不同。来到页面打开检查，点到<div class="weui-search-bar__box">中，看到右边的visibility: hidden;，这串代码将这个盒子隐藏了，关闭使用就可以看到正常的输入框了。

image.png

无障碍设计实践

仔细观察，可以发现平时我们看到的微信搜索框不长这样，而是只在中间出现一个搜索图标。这是为了确保无障碍浏览💡，添加上label标签，当聚焦在其上时可以被读出来，让盲人也可以实现浏览。

WEUI的设计理念强调了无障碍浏览的重要性，确保即使是视力障碍的用户也能通过读屏器等辅助技术顺畅地使用应用。

  • Label绑定: 使用<label>元素正确绑定到表单元素，比如搜索框，通过for属性与输入框的id匹配，确保读屏器可以正确读出其关联的文本。

  • 聚焦状态: 为可交互元素提供清晰的聚焦样式，如.weui-search-bar_focusing状态，帮助键盘导航用户识别当前焦点所在。

  • 清晰的语义结构: 使用恰当的HTML元素（如<header>, <nav>, <main>, <footer>）来构建页面结构，有助于屏幕阅读器用户理解页面布局。

  • 颜色对比度: 确保所有文本和背景之间的颜色对比度符合无障碍标准，使视觉障碍用户也能轻松阅读。

 <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>

image.png 总之，基于WEUI搭建新闻列表页时，不仅要关注界面的美观和交互的流畅，还需高度重视无障碍设计，确保每一个用户都能享受到平等的信息获取体验。通过上述组件和实践的结合，可以有效地提升应用的包容性和用户体验。

js详解

1. 初始化变量

  • tabs：选取所有带有类.weui-navbar__item的元素，这些都是导航栏中的项。
  • navbar：选取整个导航栏元素，类名为.weui-navbar。
  • searchInput：选取搜索框输入元素，ID为search_input。
  • searchBar：选取整个搜索栏元素，类名为.weui-search-bar。

2. 事件监听

点击搜索栏标签时
document.querySelector('.weui-search-bar__label').addEventListener('click', function() {
    searchBar.classList.add('weui-search-bar_focusing')
})

当用户点击搜索栏的标签时，给搜索栏添加weui-search-bar_focusing类，这通常用于改变搜索栏的样式，使其看起来像是获得了焦点，比如展开或变色，以提示用户可以开始输入搜索内容。

搜索框获得焦点时
searchInput.addEventListener('focus', function() {
    // 此处代码被省略，可以根据需要添加处理逻辑
})

通过监听focus事件，可以在搜索框获得焦点时执行某些操作，比如进一步调整样式或者自动弹出键盘等，这里不介绍过多内容。

导航栏点击事件
navbar.addEventListener('click', function(event) {
    const target = event.target;
    if (target.nodeName === 'A') {
        event.preventDefault(); // 阻止链接的默认行为，如跳转

        if (target.classList.contains('weui-bar__item_on')) { // 如果已选中，则不执行操作
            return;
        }

        // 移除当前选中项的样式，然后给点击的项添加选中样式
        document.querySelector('.weui-bar__item_on')
        .classList.remove('weui-bar__item_on');
        target.classList.add('weui-bar__item_on');
    }
})

这部分代码监听整个导航栏的点击事件。当用户点击一个链接（<a>标签）时，阻止其默认行为，例如跳转，然后检查点击的链接是否已经处于选中状态（是否有weui-bar__item_on类）。如果没有，则先从当前选中的导航项移除该类，再给新点击的项添加这个类，以此来实现导航项之间的切换效果。

想想为什么是监听整个导航栏，而不是里面的子元素，明明我们是根据点击不同的导航内来选择不同的页面。这里就要提到事件监听💡的内涵了。

了解事件监听

事件监听原则：在JavaScript中，可以通过将函数绑定到元素的事件属性（如onclick）或者使用addEventListener方法来添加点击事件。平时建议使用addEventListener，因为它支持为同一元素的同一事件添加多个处理程序。

事件委托：当有大量动态生成的元素需要绑定事件时，直接为每个元素绑定事件处理器会很消耗资源。此时可以利用事件冒泡的特性，将事件监听器添加到这些元素的共同父元素上，然后在处理函数中判断事件的实际目标，这种方法称为事件委托。

事件冒泡：事件从最深的节点，也就是事件发生的元素开始，然后逐级向上层节点传播，直至document对象。这是默认的行为，适用于大多数情况。正是利用了这个特点，才可以实现事件委托，就是我们代码中实现页面转换所用到的方法。

结语

到这里我们今天的分享就结束了，希望各位有所收益，一起加油！💕

avatar
文章
阅读
粉丝