我用阿里云盘分享了「11-11微信小程序学习.jpg」，你可以不限速下载🚀 复制这段内容打开「阿里云盘」App 即可获取 链接：https://www.aliyundrive.com/s/5cCfdiiVtMT

搜索页面

<!--pages/Search/Search.wxml-->
<!-- 顶部搜索 -->
<!-- focus='{true}' 页面加载自动获取焦点 -->
<view class="search-top">
        <input  name="search" type='text' confirm-type="search" bindconfirm="bindconfirm"  focus='{true}'  bindinput='searchInput' placeholder="飞机场 - 徐良"></input>
</view>
<view class="search-reconm"  wx:if="{{searchData && searchOK=='none'}}">
        搜索推荐
</view>
<view class="serarch-main" wx:if="{{!searchData}}">
        主体页面
</view>
<view class="search-result" style="display: {{searchOK}};">
        搜索结果
</view>

/* pages/Search/Search.wxss */
page{
        background-color: #ecedef;
}
.search-top{
        width: 100%;
        height: 90rpx;
}
.search-top input{
        width: 90%;
        height: 80rpx;
        margin-top: 5rpx;
        margin-left: 5%;
        border-bottom: 1rpx #cccccc solid;
}
/* 主体页面 */
.serarch-main{
        width: 100%;
        height: 900rpx;
        background-color: red;
}
/* 搜索结果 */
.search-result{
        width: 100%;
        height: 900rpx;
        background-color: green;
}
/* 搜索推荐 */
.search-reconm{
        width: 100%;
        height: 100%;
        background-color: #fff;
}

// pages/Search/Search.js
Page({

        /**
         * 页面的初始数据
         */
        data: {
                searchData:"",
                searchOK:"none"
        },
        searchInput(event){
                let value = event.detail.value;
                console.log("输入值",value);
                this.setData({
                        searchData:value
                })
        },
        // 点击键盘上的搜索
        bindconfirm:function(e){
                var that=this;
                var discountName=e.detail.value['search - input'] ?e.detail.value['search - input'] : e.detail.value 
                console.log('e.detail.value', discountName)
                //请求后端

                //页面渲染

                //改变页面结构
                this.setData({
                        searchOK:'display'
                })
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {

        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {

        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {

        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {

        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {

        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {

        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {

        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {

        }
})

首页

/* 取消滚动条 */
::-webkit-scrollbar {
    display: none;
}
page{
    background-color: #ecedef;
}
/* pages/index/index.wxss */
.all-view{
    width: 100%;
    background-color: #ecedef;
}
/* 搜索 */
.search{
    width: 100%;
    height: 90rpx;
    margin-top: 10rpx;
}
.search view{
    width: 15%;
    height: 90rpx;
    float: left;
}
.search view:nth-child(2){
    width: 70%;
}
.search view:nth-child(2) input{
    width: 85%;
    height: 70rpx;
    background-color: #ffffff;
    border-radius: 70rpx;
    margin-top: 10rpx;
    padding-left: 15%;
}
.search-icon{
    position: absolute;
    font-size: 45rpx;
    top: 35rpx;
    left: 137rpx;
}
.search-more,
.search-speak{
    font-size: 50rpx;
    text-align: center;
    line-height: 90rpx;
}

.first-piece{
    /* 颜色渐变 */
    /* 值一 变之前 值二 变之后 */
    background-image: linear-gradient(#ecedef,#ffffff);
    border-radius: 0 0 20rpx 20rpx;
    margin-top: 30rpx;
}
.banner{
    width: 90%;
    margin: 0 auto;
}
.banner image{
    width: 100%;
    height: inherit;
    border-radius: 20rpx;
}

/* 导航图标 */
.navi-icon{
    height: 170rpx;
    display: flex;
    margin-top: 30rpx;
}
.navi-icon view{
    width: 140rpx;
    text-align: center;
}
.navi-icon view view view{
    width: 100rpx;
    height: 100rpx;
    background-color: #fff1f1;
    border-radius: 50%;
    line-height: 100rpx;
    margin-left: 20rpx;
}
.navi-font{
    font-size: 60rpx;
    color: #fe3a3b;
}
.navi-icon text{
    font-size: 25rpx;
}

.line{
    width: 95%;
    height: 2rpx;
    background-color: #e4dede;
    margin: 20rpx auto;
}



.navi-music{
    display: flex;
    margin-top: 15rpx;
    height: 300rpx;
}
.navi-music view{
    margin-right: 15rpx;
}
.navi-music view:nth-child(1){
    margin-left: 15rpx;
}
.navi-music image{
    width: 190rpx;
    height: 190rpx;
    border-radius: 12rpx;
}
.navi-music text{
    font-size: 24rpx;
    margin-left: 15rpx;
    /* 多行文本溢出 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.view-item{
    background-color: #ffffff;
    margin: 20rpx 0;
    padding: 30rpx 0;
    border-radius: 20rpx;
}

/* 分类排行榜 */
.navi-type-ranking{
    display: flex;
    height: 400rpx;
}
.ranking-item view{
    width: 690rpx;
    height: 100rpx;
    margin-top: 30rpx;
}
.ranking-item view image{
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    margin-left: 30rpx;
    float: left;
}
.ranking-item view view text{
    float: left;
}
/* 找到第二个标签 且这个标签要为text */
.ranking-item view view text:nth-child(1){
    margin-left: 20rpx;
    color:#000000;
}

.ranking-item view view text:nth-child(2){
    margin-left: 10rpx;
    color:#989898;
    font-size: 20rpx;
    line-height: 45rpx;
    width: 200rpx;
}
.ranking-item view view text:nth-child(3){
    display: inline;
    margin-left: 20rpx;
    color:#989898;
    font-size: 30rpx;
    margin-top: 10rpx;
}
.ranking-play{
    float: right !important;
    font-size: 50rpx;
    color:#989898;
    margin-top: -20rpx;
}

<view class="all-view">
    <view class="search">
        <view class="iconfont icon-gengduocaidan search-more"></view>
        <view>
            <view class="search-icon iconfont icon-sousuo"></view>
            <input type="text" disabled="disabled" placeholder="小苹果 最近很火哦"/>
        </view>
        <view class="iconfont icon-maikefeng search-speak"></view>
    </view>
    <view class="first-piece">
        <!-- 轮播图 -->
        <swiper indicator-dots autoplay interval="2000" class="banner">
            <swiper-item wx:for="{{bannerList}}" wx:key="index">
                <image src="{{item.pic}}"></image>
            </swiper-item>
        </swiper>

        <!-- 导航图标 -->
        <scroll-view class="navi-icon" enable-flex scroll-x>
            <view>
                <view>
                    <view class="iconfont icon-rili1 navi-font"></view>
                </view>
                <text>每日推荐</text>
            </view>

            <view>
                <view>
                    <view class="iconfont icon-shouyinji-xian navi-font"></view>
                </view>
                <text>私人FM</text>
            </view>

            <view>
                <view>
                    <view class="iconfont icon-gedan navi-font"></view>
                </view>
                <text>歌单</text>
            </view>

            <view>
                <view>
                    <view class="iconfont icon-paihangbanggequ navi-font"></view>
                </view>
                <text>排行榜</text>
            </view>

            <view>
                <view>
                    <view class="iconfont icon-zhibo navi-font"></view>
                </view>
                <text>直播</text>
            </view>
            <view>
                <view>
                    <view class="iconfont icon-zhuanjiguangpan navi-font"></view>
                </view>
                <text>数字专辑</text>
            </view>
            <view>
                <view>
                    <view class="iconfont icon-shoucang navi-font"></view>
                </view>
                <text>歌房</text>
            </view>
            <view>
                <view>
                    <view class="iconfont icon-shoubing navi-font"></view>
                </view>
                <text>游戏专区</text>
            </view>
        </scroll-view>

        <view class="line"></view>
        
        <NavHeader title="推荐歌单" btnname="更多"></NavHeader>


        <scroll-view class="navi-music" enable-flex scroll-x>
            <view wx:for="{{recoSongs}}" wx:key="index">
                <image src="{{item.picUrl}}"></image>
                <text>{{item.name}}</text>
            </view>
        </scroll-view>
    </view>
    

    <view class="view-item">
        <NavHeader title="他们把故事唱成了歌" btnname="播放"  refresh="true"></NavHeader>
        <scroll-view class="navi-type-ranking" enable-flex scroll-x>
            <view class="ranking-item">
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                    <view>
                        <text>再回首</text>
                        <text>-李宗盛</text>
                        <text>乘风破浪归来仍是少年</text>
                        <text class="iconfont icon-bofangqi-bofangxiaodianshi ranking-play"></text>
                    </view>
                </view>
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                </view>
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                </view>
            </view>

            <view class="ranking-item">
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                </view>
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                </view>
                <view>
                    <image src="http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg"></image>
                </view>
            </view>
        </scroll-view>


    </view>


    <view class="view-item">
        <NavHeader title="精选音乐视频" btnname="换一批"></NavHeader>

    </view>

    <view class="view-item">
        <NavHeader title="你的雷达歌单" btnname="更多"></NavHeader>

    </view>
</view>

iconfont.wxss

@font-face {
  font-family: "iconfont"; /* Project id 2909915 */
  src: url('//at.alicdn.com/t/font_2909915_jaiaw7qvelj.woff2?t=1636611228164') format('woff2'),
       url('//at.alicdn.com/t/font_2909915_jaiaw7qvelj.woff?t=1636611228164') format('woff'),
       url('//at.alicdn.com/t/font_2909915_jaiaw7qvelj.ttf?t=1636611228164') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-maikefeng:before {
  content: "\e61f";
}

.icon-diandiandianshu:before {
  content: "\e679";
}

.icon-31haoyou:before {
  content: "\e603";
}

.icon-gaiicon-:before {
  content: "\e6cf";
}

.icon-guanzi-:before {
  content: "\e657";
}

.icon-24gf-playCircle:before {
  content: "\ea82";
}

.icon-shoucang1:before {
  content: "\e8c6";
}

.icon-yinlewenjianjia:before {
  content: "\e6ac";
}

.icon-shangchuanyunpan:before {
  content: "\e6b3";
}

.icon-sousuo:before {
  content: "\e651";
}

.icon-yonghu-yuan:before {
  content: "\e623";
}

.icon-gengduocaidan:before {
  content: "\e620";
}

.icon-bofangqi-bofangxiaodianshi:before {
  content: "\e6ab";
}

.icon-shuaxin:before {
  content: "\e6ef";
}

.icon-youjiantou:before {
  content: "\e68c";
}

.icon-zhuanjiguangpan:before {
  content: "\e64b";
}

.icon-rili1:before {
  content: "\e602";
}

.icon-shoubing:before {
  content: "\e61c";
}

.icon-shoucang:before {
  content: "\e645";
}

.icon-zhibo:before {
  content: "\e7d5";
}

.icon-shouyinji-xian:before {
  content: "\e641";
}

.icon-gedan1:before {
  content: "\e61b";
}

.icon-adidasi-sanyecao:before {
  content: "\e647";
}

.icon-paihangbanggequ:before {
  content: "\e6bd";
}

.icon-shouyinji:before {
  content: "\e600";
}

.icon-31paixingbang:before {
  content: "\e601";
}

.icon-rili:before {
  content: "\e63f";
}

.icon-gedan:before {
  content: "\e636";
}