小程序从数组中搜索

 

 

在数组中查找满足条件进行筛选,可以用wxs文件进行方法封装,通过bindinput事件将value储存,返回数组中是否有包含当前value的对象,通过indexOf判断,如果返回空则表示存在当前对象,则不进行任何操作,如果返回一个对象,则不包含当前对象,设置style的display设置为none进行隐藏。

wxs文件

function searchInp(item, str) {
  return item.name.indexOf(str) !== -1 || item.age.indexOf(str) !== -1 || "";
}

module.exports = {
  searchInp: searchInp
};

wxml文件

<wxs src="./index.wxs" module="fun"/>

// 判断当前对象是否存在
<view wx:for='{{list}}' style="{{fun.searchInp(item, searchVal) ? '' : 'display: none'}}"></view>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的微信小程序数组搜索功能的代码示例: 1. 在小程序的json文件中添加需要的页面和组件: ```json { "pages": [ "pages/index/index", "pages/search/search" ], "window": { "navigationBarTitleText": "搜索功能示例" }, "usingComponents": { "van-search": "/components/vant/search/index", "van-cell": "/components/vant/cell/index" } } ``` 2. 在小程序的入口页面index.wxml中添加搜索组件和跳转按钮: ```html <van-search placeholder="请输入关键字" bind:search="onSearch"></van-search> <van-cell title="跳转至搜索结果页" bind:click="toSearch"></van-cell> ``` 3. 在index.js中编写事件处理函数: ```javascript Page({ onSearch(event) { const keyword = event.detail; // 在此处编写搜索逻辑,将搜索结果存储在data中,比如 this.setData({ searchResult: ['文章1', '文章2', '文章3'] }); }, toSearch() { wx.navigateTo({ url: '/pages/search/search?result=' + JSON.stringify(this.data.searchResult) }); } }); ``` 4. 在搜索结果页search.js中获取跳转时传递的搜索结果数据并显示: ```javascript Page({ onLoad(options) { const result = JSON.parse(options.result); // 在此处使用result进行页面渲染,比如 this.setData({ searchResult: result }); } }); ``` 5. 在search.wxml中展示搜索结果: ```html <view wx:for="{{searchResult}}" wx:key="index">{{item}}</view> ``` 这样就实现了一个简单的微信小程序数组搜索功能,用户在首页输入关键字后,点击跳转按钮可以跳转到搜索结果页,搜索结果页会展示搜索到的数据。请注意,这只是一个简单的示例,实际的搜索功能可能需要更复杂的逻辑和交互。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值