当前位置：网站首页>微信小程序 29 热搜榜的完善②
微信小程序 29 热搜榜的完善②
2022-07-25 19:10:00 【牟泉禹[Dark Cat]】
29.1 历史记录板块的静态搭建
<block wx:else>
<!-- 搜索历史记录板块-->
<view class="history">
<view class="title">历史</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<view class="historyItem">
Fade
</view>
<view class="historyItem">
海阔天空
</view>
<!-- 删除-->
<text class="iconfont icon-shanchu delete"></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>
</block>
/* 搜索历史*/
.history {
position: relative;
display: flex;
flex-wrap: wrap;
line-height: 50rpx;
margin: 20rpx 0;
}
.history .title {
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
.history .historyItem {
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
background: #ededed;
margin-left: 20rpx;
margin-bottom: 20rpx;
padding: 0 30rpx;
border-radius: 20rpx;
}
.history .delete {
position: absolute;
bottom: -36rpx;
right: 15rpx;
font-size: 36rpx;
}
29.2 添加和删除历史记录
<view class="searchContainer">
<!-- 头部-->
<view class="header">
<view class="searchInput">
<text class="iconfont icon-sousuo searchIcon"></text>
<input value="{
{searchContent}}" bindinput="handelInputChange" type="text" input placeholder="{
{placeholderContent}}" placeholder-class="placeholder"></input>
<text class="clear" bindtap="clearSearchContent" hidden="{
{!searchContent}}">X</text>
</view>
<text class="cancel" bindtap="cancelSearch">取消</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-sousuo"></text>
<text class="itemName">{
{item.name}}</text>
</view>
</view>
</view>
</block>
<block wx:else>
<!-- 搜索历史记录板块-->
<view class="history" wx:if="{
{historyList.length}}">
<view class="title">历史</view>
<view class="historyItem" wx:for="{
{historyList}}" wx:key="item">
{
{item}}
</view>
<!-- 删除-->
<text class="iconfont icon-shanchu delete" bindtap="deleteHistory"></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>
</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;
}
.clear {
z-index: 10;
position: absolute;
right: 30rpx;
top: 0;
font-size: 30rpx;
}
.cancel {
width: 100rpx;
text-align: center;
}
.searchIcon {
position: absolute;
left: 5rpx;
}
.itemName{
margin: 0 20rpx;
}
.searchInput input{
margin-left: 50rpx;
height: 60rpx;
}
/*h5 新特性之一，可以将 placeholder 设置 class 和 样式*/
.placeholder {
color: #d43c33;
font-size: 28rpx;
}
/*热搜榜*/
.hotContainer .title {
margin-top: 30rpx;
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;
}
/* 搜索历史*/
.history {
position: relative;
display: flex;
flex-wrap: wrap;
line-height: 50rpx;
margin: 20rpx 0;
}
.history .title {
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
.history .historyItem {
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
background: #ededed;
margin-left: 20rpx;
margin-bottom: 20rpx;
padding: 0 30rpx;
border-radius: 20rpx;
}
.history .delete {
position: absolute;
bottom: -36rpx;
right: 15rpx;
font-size: 36rpx;
}
// pages/search/search.js
import request from "../../utils/request";
let isSend = false; // 用于 函数 节流使用
Page({
/** * 页面的初始数据 */
data: {
placeholderContent: '', // placeholder 内容
hotList: [], // 热搜榜数据
searchContent: '', // 用户输入的表单项数据
searchList: [], // 关键字模糊匹配的数据
historyList: [], // 历史记录列表
},
/** * 生命周期函数--监听页面加载 */
onLoad(options) {
// 获取初始化数据
this.getInitData();
// 获取历史记录
this.getSearchHistory();
},
// 获取初始化的数据
async getInitData() {
let placeholderData = await request("search/default",{
});
let hotListData = await request("search/hot/detail");
this.setData({
placeholderContent: placeholderData.data.showKeyword,
hotList: hotListData.data
});
},
// 获取本地历史记录的功能函数
getSearchHistory(){
let historyList = wx.getStorageSync('searchHistory');
if(historyList){
this.setData({
historyList
})
}
},
deleteHistory(){
wx.showModal({
content:"确认删除吗？",
success: (res) => {
if(res.confirm){
this.setData({
historyList: []
});
wx.removeStorageSync('searchHistory');
}
},
});
},
cancelSearch(){
this.setData({
searchContent: '',
searchList: []
})
},
clearSearchContent(){
this.setData({
searchContent: ''
})
},
// 获取 搜索数据的功能函数
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
})
// 将搜索的关键字 添加到 搜索历史记录中
let {
searchContent, historyList} = this.data;
if(historyList.indexOf(searchContent) !== -1){
historyList.splice(historyList.indexOf(searchContent),1);
}
historyList.unshift(searchContent);
this.setData({
historyList
});
wx.setStorageSync('searchHistory',historyList);
},
// 表单内容发生改变的事件
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() {
}
})
边栏推荐
- Juzhi cloud computing opens a new era to the "proprietary cloud" of Youfu network
- Pymoo learning (7): Parallelization
- 果链“围城”：傍上苹果，是一场甜蜜与苦楚交错的旅途
- 小程序毕设作品之微信校园维修报修小程序毕业设计成品（7）中期检查报告
- [applet development] common components and basic usage details
- Pymoo learning (6): termination conditions
- Ping command details [easy to understand]
- srec_ Use of common cat parameters
- qt exec和show的区别
- SQL Server 2019 安装教程
猜你喜欢
Basic music theory -- configuring chords
Huawei recruited "talented teenagers" twice this year; 5.4 million twitter account information was leaked, with a selling price of $30000; Google fired engineers who believed in AI consciousness | gee
阿里云技术专家郝晨栋：云上可观测能力——问题的发现与定位实践
How to design product help center? The following points cannot be ignored
Talk about 15 tips of SQL optimization
Real estate enterprises have launched a "war of guarantee"
小程序毕设作品之微信校园维修报修小程序毕业设计成品（6）开题答辩PPT
阿里云免费SSL证书申请详细流程
HTTP cache tongtianpian, there may be something you want
![[encryption weekly] has the encryption market recovered? The cold winter has not thawed yet! Check the major events in the encryption market last week!](/img/6d/b037208996ce52016d014062deaa1f.jpg)
[encryption weekly] has the encryption market recovered? The cold winter has not thawed yet! Check the major events in the encryption market last week!
随机推荐
Youfu force supercomputing provides customized high-performance computing services for customers
一个函数中写多少行代码比较合适呢？ 代码整洁之道
Ping 命令详解[通俗易懂]
[applet development] detailed explanation of host environment
Full scale and Xuan of C key
FPGA based 1080p 60Hz bt1120 interface debugging process record
Go代码检查工具
基础乐理--配置和弦
怎样设计产品帮助中心？以下几点不可忽视
ThreadLocal Kills 11 consecutive questions
Common development software download addresses
优维低代码：Use Resolves
Gan, why ".Length! == 3??
telnet安装以及telnet(密码正确)无法登录！
【DETR用于3D目标检测】DETR3D: 3D Object Detection from Multi-view Images via 3D-to-2D Queries
Ultimate doll 2.0 | cloud native delivery package
常用的开发软件下载地址
Youth, oh, youth
Intouch高级报警(报警筛选)
qt之编译成功但程序无法运行