微信小程序搜索功能的实现（模糊搜索、带历史记录）

搜索页wxml

<searchbar bindsearchinput="onSearchInputEvent"></searchbar>
<view class='history-list-group' wx:if="{{histories && !subjects}}"><view class='history-title'><view class='title'>历史记录</view><view class='clear' bindtap="onClearEvent">清除</view></view><navigator wx:for="{{histories}}" wx:key="{{item.id}}" url='/pages/detail/detail?type=movie&id={{item.id}}' class='history-group'>{{item.title}}</navigator>
</view><view class='item-list-group'><view wx:for="{{subjects}}" class='item-group' wx:key="{{item.id}}" bindtap="onItemTapEvent" data-id="{{item.id}}" data-title="{{item.title}}"><image src='{{item.pic.normal}}' class='thumbnail'></image><view class='info-group'><view class='title'>{{item.title}}</view><view class='rate-year'>{{item.rating.value}}分/{{item.year}}</view></view></view>
</view>

搜索页wxss

.item-list-group{padding: 10rpx 20rpx;
}.item-list-group .item-group{padding: 10rpx 0;border-bottom: 1px solid #e4e4e4;display: flex;
}.item-group .thumbnail{width: 80rpx;height: 100rpx;margin-right: 20rpx;
}.item-group .info-group{flex: 1;display: flex;flex-direction: column;justify-content: space-between;
}.info-group .title{font-size: 32rpx;
}.info-group .rate-year{font-size: 28rpx;color: #7b7b7b;
}.history-list-group{padding: 10rpx 20rpx;
}.history-list-group .history-title{display: flex;justify-content: space-between;padding: 20rpx 0;background: #f9f9f9;font-size: 28rpx;color: #9e9e9e;
}.history-list-group .history-group{font-size: 32rpx;padding: 20rpx 0;border-bottom: 1px solid #e4e4e4;
}

js文件

// pages/search/search.js
import {network} from "../../utils/network.js";Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.getStorage({key: 'searched',success: function(res) {var data = res.data;that.setData({histories: data})},})},onSearchInputEvent: function(event){var that = this;var value = event.detail.value;if(!value || value === ""){that.setData({subjects: null});return;}network.getSearch({q: value,success: function(subjects){that.setData({subjects: subjects})}})},onItemTapEvent: function(event){var that = this;var id = event.currentTarget.dataset.id;var title = event.currentTarget.dataset.title;var histories = that.data.histories;var isExisted = false;if(histories){for(var index=0;index<=histories.length;index++){var movie = histories[index];if(movie.id === id){isExisted = true;break;}}}if(!isExisted){if(!histories){histories = [];}histories.push({title:title,id:id});wx.setStorage({key: 'searched',data: histories,success: function () {console.log("保存成功！");}})}wx.navigateTo({url: "/pages/detail/detail?type=movie&id="+id,});},onClearEvent: function(event){wx.removeStorage({key: 'searched',success: function(res) {console.log("删除成功！");},});this.setData({histories: null});}
})

微信小程序搜索功能的实现（模糊搜索、带历史记录）相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序搜索功能系列一套全
今天说一下小程序首页的搜索功能吧这个搜索功能我是建了一个组件,用组件写的: 上代码: wxml代码 <view class="search"><input pl ...
微信小程序搜索功能！附：小程序前端+PHP后端
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序搜索功能！附：小程序前端+PHP后端 1
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序---搜索功能并跳转搜索结果页面
搜索页面: search.wxml页面: <view class="form"><input class="searchInput" valu ...
微信小程序搜索功能实现
js const config = require('../../utils/config.js') //获取应用实例 const app = getApp()Page({data: {search: ...
5分钟搞定微信小程序搜索功能
一.废话不多说,先看效果: 附赠一个时间选择器: 看了效果图,当然要看看如何敲代码实现了~ 二.代码附上: 1.目录结构 2.全部代码: app.js //app.js App({globalData ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...

微信小程序搜索功能的实现（模糊搜索、带历史记录）

搜索页wxml

搜索页wxss

微信小程序搜索功能的实现（模糊搜索、带历史记录）相关推荐

最新文章

热门文章