【详细】小程序搜索功能实现

搜索功能是app，小程序中非常常见的一个需求，作为常见的需求，如何高效地完成该需求的实现，就异常关键。那么小程序中如何从0到1实现搜索功能呢？请看本文

效果展示

历史记录

跳转到详情页面（详情页面开发链接https://blog.csdn.net/m0_37218227/article/details/107297203 ）

搜索页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});}
})

【详细】小程序搜索功能实现相关推荐

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

【详细】小程序搜索功能实现

效果展示

搜索页wxml

搜索页wxss

js文件

【详细】小程序搜索功能实现相关推荐

最新文章

热门文章