微信小程序——纯前端操作列表项搜索

最新推荐文章于 2024-11-11 11:40:05 发布

原创

最新推荐文章于 2024-11-11 11:40:05 发布 · 770 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

此博客展示了如何在微信小程序中实现搜索框和列表滚动功能。`index.wxml`文件定义了搜索框和滚动视图，其中输入事件触发搜索功能，`index.js`文件处理搜索逻辑，过滤出包含搜索值的列表项。页面加载时初始化数据，并存储到本地存储。搜索匹配根据输入值过滤站点列表，更新显示。

在这里插入图片描述

在这里插入图片描述
index.wxml

<view class="container">
  <!--  搜索框部分 -->
  <view class='search'>
    <input type='text' placeholder='请输入搜索名' confirm-type='search' value="searchVal" bindinput='inputSiteName'></input>
  </view>
  <!--  列表展示部分  -->
  <view class="page-section-spacing">
    <scroll-view scroll-y="true" style