Wechat applet realizes music search page

Antecedents feed

wx:if and hidden

wx:if Be similar to Vue Medium v-if, Conditions apply colours to a drawing ;hidden Be similar to Vue Medium v-show, simply Control show and hide .

Packaging elements block

wx:if Can be added to One On the label , Can be added to A group of On the label . If you want to use wx:if To control a set of labels , use <block/> Pack this group of labels .

Applet project

The main files involved in the code are ：

1. pages/search/search.json
2. pages/search/search.wxml
3. pages/search/search.wxss
4. pages/search/search.js

pages/search.json

{
    
  "usingComponents": {
    },
  "navigationBarTitleText": " Search for ",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

pages/search.wxml

<view class="search-container">
  <view class="header">
    <view class="input-box">
      <image src="/static/images/search.png"></image>
      <input type="text" placeholder=" What you want to hear   There are... Here ~" placeholder-style="font-swxize:27rpx" bindinput="handleInput" value="{
     {keyword}}"/>
        <image src="/static/images/cross.png" bindtap="removeKeyword" hidden="{
     {!keyword}}"></image>
    </view>
  </view>
  <block wx:if="{
     {keyword}}">
    <view class="search-container">
      <view class="search-title"> Search for "{
   {keyword}}"</view>
      <view class="search-list">
        <view class="search-item" wx:for="{
     {searchList}}" wx:key="id">
          <image src="/static/images/search.png"></image>
          <view class="content">{
   {item.content}}</view>
        </view>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class="history-container" wx:if="{
     {historyList.length}}">
      <view class="history-header">
        <view class="history-title"> Search history </view>
        <image src="/static/images/delete.png" bindtap="deleteHistory"></image>
      </view>
      <view class="history-list">
        <text class="history-item" wx:for="{
     {historyList}}" wx:key="*this">{
   {item}}</text>
      </view>
    </view>
    <view class="hot-container">
    <view class="hot-title"> Hot search list </view>
    <view class="hot-list">
      <view class="hot-item" wx:for="{
     {hotList}}" wx:key="id">
        <text class="order" style="{
        {
        (index===0 || index ===1 || index==2) && 'color:#d81e06' }}">{
   {index+1}}</text>
        <text class="name">{
   {item.keyword}}</text>
        <image wx:if="{
     {item.iconUrl}}" src="{
     {item.iconUrl}}"></image>
      </view>
    </view>
  </view>
  </block>
</view>

pages/search.wxss

.search-container{
    
  padding: 20rpx;
}
.input-box{
    
  background: #eee;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
}
.input-box input{
    
  height: 60rpx;
  line-height: 60rpx;
  flex: 1;
  font-size: 27rpx;
}
.input-box image{
    
  width: 36rpx;
  height: 36rpx;
  padding: 0 20rpx;
}
.hot-container{
    
  margin: 20rpx 0;
}
.hot-container .hot-title{
    
  font-size: 26rpx;
  font-weight:550;
}
.hot-list{
    
  padding: 10rpx 0 ;
}
.hot-item{
    
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.hot-item .order{
    
  display: inline-block;
  width: 40rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  margin-right: 30rpx;
  color: #888;
}
.hot-item .name{
    
  font-weight: 550;
}
.hot-item image{
    
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
}
.search-container .search-title{
    
  color: #d81e06;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
}
.search-item{
    
  display: flex;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
}
.search-item image{
    
  width: 28rpx;
  height: 28rpx;
  margin-right: 20rpx;
}
.search-item .content{
    
  flex:1;
  color: #666;
  font-size: 28rpx;
}
.history-container{
    
  margin-top: 20rpx;
}
.history-header {
    
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-header .history-title{
    
  font-size: 26rpx;
  font-weight:550;
}
.history-header image{
    
  width: 36rpx;
  height: 36rpx;
}
.history-list{
    
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}
.history-item{
    
  font-size: 26rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  padding: 6rpx 16rpx;
  background: #eee;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx 0;
}

pages/search.js

const host = "http://localhost:3000"
let timer = null;

Page({
    
  data:{
    
    hotList:[],
    keyword:'',
    searchList:[],
    historyList:[]
  },
  onLoad(){
    
    this.getHotList();
    const historyList = wx.getStorageSync('historyList');
    if(historyList){
    
      this.setData({
    historyList})
    }
  },
  getHotList(){
    
    const result = [
      {
    id:"001",keyword:" Jay Chou ",iconUrl:host+"/images/hot-fill.png"},
      {
    id:"002",keyword:" The greatest work "},
      {
    id:"003",keyword:" Jj Lin "},
      {
    id:"004",keyword:" Lone brave "},
      {
    id:"005",keyword:" Goodbye, Monica "},
      {
    id:"006",keyword:" Eason Chan "},
      {
    id:"007",keyword:" Li Ronghao "},
      {
    id:"008",keyword:" Mao Bu Yi "}
    ]
    this.setData({
    hotList:result})
  },
  handleInput(event){
    
    const keyword = event.detail.value.trim();
    if(!keyword) {
    
      this.setData({
    keyword:''});
      return;
    }
    this.throttle(this.getSearchList,500);

    const {
    historyList} = this.data;
    const index = historyList.indexOf(keyword);
    if(index > -1){
    
      historyList.splice(index,1);
    }
    const newHistoryList = [keyword,...historyList].slice(0,10) // Display at most 10 Search history , And the latecomers live on 
    wx.setStorageSync("historyList",newHistoryList)
    this.setData({
    
      keyword,
      historyList:newHistoryList
    });
  },
  throttle(fn,delay){
    
    if(timer != null) return;
    timer = setTimeout(() => {
    
      timer = null
      fn();
    },delay) 
  },
  getSearchList(){
    
    const result = [
      {
    id:"001",content:" Jay Chou "},
      {
    id:"002",content:" Jay Chou   The greatest work "},
      {
    id:"003",content:" Jay Chou   Grandpa's tea "},
      {
    id:"004",content:" Jay Chou   Coral Sea "},
      {
    id:"005",content:" Jay Chou   Chapter seven of the night "},
      {
    id:"006",content:" Jay Chou   Don't cry "},
      {
    id:"007",content:" Jay Chou   Wait for you to finish class "},
      {
    id:"008",content:" Jay Chou   I believe so "}
    ]
    this.setData({
    searchList:result})
  },
  removeKeyword(){
    
    this.setData({
    keyword:'',searchList:[]})
  },
  deleteHistory(){
    
    this.setData({
    historyList:[]});
    wx.removeStorageSync('historyList');
  }
})

Related links

Conditions apply colours to a drawing