28.1 热搜榜、placeholder 动态数据
接口 http://localhost:3000/search/default
onLoad(options) {
this.getInitData();
},
// 获取初始化的数据
async getInitData() {
let placeholderData = await request("search/default",{});
this.setData({
placeholderContent: placeholderData.data.showKeyword
});
},
<input type="text" placeholder="{{placeholderContent}}" placeholder-class="placeholder"></input>
接口 http://localhost:3000/search/hot/detail
onLoad(options) {
this.getInitData();
},
// 获取初始化的数据
async getInitData() {
let placeholderData = await request("search/default",{});
let hotListData = await request("search/hot/detail");
this.setData({
placeholderContent: placeholderData.data.showKeyword,
hotList: hotListData.data
});
},
<view class="searchContainer">
<!-- 头部-->
<view class="header">
<view class="searchInput">
<text class="iconfont icon-search searchIcon"></text>
<input type="text" placeholder="{{placeholderContent}}" placeholder-class="placeholder"></input>
</view>
<text class="cancel">取消</text>
</view>
<!--热搜榜-->
<view class="hotContainer">
<view class="title">热搜榜</view>
<!-- 热搜列表-->
<view class="hotList">
<view class="hotItem" wx:for="{{hotList}}" wx:key="score">
<text class="order">{{index + 1}}</text>
<text>{{item.searchWord}}</text>
<image class="iconImg" wx:if="{{item.iconUrl}}" src="{{item.iconUrl}}"></image>
</view>
</view>
</view>
</view>
28.2 模糊匹配搜索数据
bindinput 事件
:无论是否失去焦点,只要改变内容,都触发。
bindcheck 事件
:要失去焦点才能触发这个事件。
接口 http://localhost:3000/search?keywords=fade&limit=10
<input bindinput="handelInputChange" type="text" input placeholder="{{placeholderContent}}" placeholder-class="placeholder"></input>
data: {
placeholderContent: '', // placeholder 内容
hotList: [], // 热搜榜数据
searchContent: '', // 用户输入的表单项数据
searchList: [], // 关键字模糊匹配的数据
},
// 获取 搜索数据的功能函数
async getSearchList(){
let searchListData = await request("search", {keywords: this.data.searchContent, limit: 10});
this.setData({
searchList: searchListData.result.songs
})
},
// 表单内容发生改变的事件
handelInputChange(event) {
console.log(event);
this.setData({
searchContent: event.detail.value.trim()
});
// 函数节流
if (isSend) {
return;
}
isSend = true;
setTimeout(() => {
isSend = false;
this.getSearchList();
}, 1000);
},
28.3 搜索内容展示
写它的 html 大体架构
<view class="searchContainer">
<!-- 头部-->
<view class="header">
<view class="searchInput">
<text class="iconfont icon-search searchIcon"></text>
<input bindinput="handelInputChange" type="text" input placeholder="{{placeholderContent}}" placeholder-class="placeholder"></input>
</view>
<text class="cancel">取消</text>
</view>
<block wx:if="{{searchList.length}}">
<!-- 搜索内容展示-->
<view class="showSearchContent">
<view class="searchContent">搜索内容:{{searchContent}}</view>
<view class="searchList">
<view class="searchItem" wx:for="{{searchList}}" wx:key="id">
<text class="iconfont icon-search"></text>
<text>{{item.name}}</text>
</view>
</view>
</view>
</block>
<block wx:else>
<!--热搜榜-->
<view class="hotContainer">
<view class="title">热搜榜</view>
<!-- 热搜列表-->
<view class="hotList">
<view class="hotItem" wx:for="{{hotList}}" wx:key="score">
<text class="order">{{index + 1}}</text>
<text>{{item.searchWord}}</text>
<image class="iconImg" wx:if="{{item.iconUrl}}" src="{{item.iconUrl}}"></image>
</view>
</view>
</view>
</block>
</view>
/* pages/search/search.wxss */
.searchContainer {
padding: 0 20rpx;
}
.header {
display: flex;
height: 60rpx;
line-height: 60rpx;
padding: 10rpx 0;
}
.searchInput {
position: relative;
flex: 1;
background: rgba(237,237,237,0.3);
border-right: 30rpx;
}
.cancel {
width: 100rpx;
text-align: center;
}
.searchIcon {
position: absolute;
left: 15rpx;
}
.searchInput input{
margin-left: 50rpx;
height: 60rpx;
}
/*h5 新特性之一,可以将 placeholder 设置 class 和 样式*/
.placeholder {
color: #d43c33;
font-size: 28rpx;
}
/*热搜榜*/
.hotContainer .title {
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #eee;
}
.hotList {
display: flex;
flex-wrap: wrap;
}
.hotItem {
width: 50%;
height: 80rpx;
line-height: 80rpx;
font-size: 26rpx;
}
.hotItem .order {
margin: 0 10rpx;
}
.hotItem .iconImg {
width: 35rpx;
height: 20rpx;
margin-left: 10rpx;
}
/*搜索内容展示*/
.searchContent {
color: rgba(107, 100, 238, 0.96);
height: 80rpx;
line-height: 82rpx;
font-size: 24rpx;
border-bottom: 1rpx solid #d43c33;
}
.searchItem {
height: 80rpx;
line-height: 80rpx;
display: flex;
}
.searchItem .content {
flex: 1;
margin-left: 20rpx;
border-bottom: 1rpx solid #eee;
font-size: 26rpx;
}
// pages/search/search.js
import request from "../../utils/request";
let isSend = false; // 用于 函数 节流使用
Page({
/**
* 页面的初始数据
*/
data: {
placeholderContent: '', // placeholder 内容
hotList: [], // 热搜榜数据
searchContent: '', // 用户输入的表单项数据
searchList: [], // 关键字模糊匹配的数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getInitData();
},
// 获取初始化的数据
async getInitData() {
let placeholderData = await request("search/default",{});
let hotListData = await request("search/hot/detail");
this.setData({
placeholderContent: placeholderData.data.showKeyword,
hotList: hotListData.data
});
},
// 获取 搜索数据的功能函数
async getSearchList(){
if(!this.data.searchContent){
this.setData({
searchList: []
});
return;
}
let searchListData = await request("search", {keywords: this.data.searchContent, limit: 10});
this.setData({
searchList: searchListData.result.songs
})
},
// 表单内容发生改变的事件
handelInputChange(event) {
console.log(event);
this.setData({
searchContent: event.detail.value.trim()
});
// 函数节流
if (isSend) {
return;
}
isSend = true;
setTimeout(() => {
isSend = false;
this.getSearchList();
}, 500);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})