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

最新推荐文章于 2024-04-17 16:10:04 发布

贝塔贝卡贝

最新推荐文章于 2024-04-17 16:10:04 发布

阅读量668

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Kiruthika/article/details/118191286

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述

在这里插入图片描述
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<