• 微信小程序实现音乐搜索页面

    文章目录

    前情提要

    wx:if 和 hidden

    wx:if 类似于Vue中的v-if，条件渲染；hidden 类似于Vue中的v-show，简单地控制显示与隐藏。

    包装元素block

    wx:if可以添加到一个标签上，可以添加到一组标签上。如果想用wx:if来控制一组标签，用将该组标签包装起来即可。

    小程序项目

    代码涉及的主要文件有：

    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": "搜一搜",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    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="你想听的 这里都有~" 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">搜索"{{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">搜索历史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">热搜榜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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107

    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:"周杰伦",iconUrl:host+"/images/hot-fill.png"},
      {id:"002",keyword:"最伟大的作品"},
      {id:"003",keyword:"林俊杰"},
      {id:"004",keyword:"孤勇者"},
      {id:"005",keyword:"再见莫妮卡"},
      {id:"006",keyword:"陈奕迅"},
      {id:"007",keyword:"李荣浩"},
      {id:"008",keyword:"毛不易"}
    ]
    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) //最多显示10条搜索历史，且后来者居上
    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:"周杰伦"},
      {id:"002",content:"周杰伦 最伟大的作品"},
      {id:"003",content:"周杰伦 爷爷泡的茶"},
      {id:"004",content:"周杰伦 珊瑚海"},
      {id:"005",content:"周杰伦 夜的第七章"},
      {id:"006",content:"周杰伦 说好不哭"},
      {id:"007",content:"周杰伦 等你下课"},
      {id:"008",content:"周杰伦 我是如此相信"}
    ]
    this.setData({searchList:result})
  },
  removeKeyword(){
    this.setData({keyword:'',searchList:[]})
  },
  deleteHistory(){
    this.setData({historyList:[]});
    wx.removeStorageSync('historyList');
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78

    相关链接

    条件渲染

  • 相关阅读:
    leetcode T31:下一排列
    nginx和apache哪个支持的并发高，为什么
    人生苦短，我用Python
    conan入门(二十八):解决conan 1.60.0下 arch64-linux-gnu交叉编译openssl/3.1.2报错问题
    万字长文带你了解 CloudOps 自动化运维的奥秘，助力云上业务高效稳定运行
    elment UI el-date-picker 月份组件选定后提交后台页面显示正常，提交后台字段变成时区格式
    JS 点击气泡卡片自身外的区域自动关闭的代码逻辑
    无线耳机能不能设计成我想象的这样的？
    树莓派无桌面配置WiFi连接
    XML解析
  • 原文地址：https://blog.csdn.net/qzw752890913/article/details/126012927