search頭部搭建

老樣子搭建一個(gè)search搜索頁(yè)面

?還有一塊沒有實(shí)現(xiàn)，那就是讓輸入框默認(rèn)的文本變換顏色

?微信小程序: input輸入框placeholder樣式的修改_微信小程序placeholder樣式_酷伊奧的博客-CSDN博客

?百度搜索了一下，找到了這個(gè)大佬的解決方案。很nice

<view class="searchContainer">
    <view class="header">
        <view class="searchInput">
            <text class="iconfont icon-search1 searchIcon"></text>
            <input type="text" placeholder="搜索歌曲" placeholder-class="placeholder-style"/>
        </view>
        <text class="cancel">取消</text>
    </view>
</view>

/* pages/search/search.wxss */
.header{
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    padding: 10rpx;
}
.searchInput{
    position: relative;
    flex: 1;
    background: rgba(237, 237, 237, 0.3);
    border-radius: 30rpx;
}
.cancel{
    width: 100rpx;
    text-align: center;
}
.searchIcon{
    position: absolute;
    left: 15rpx;
}
.searchInput input{
    margin-left: 50rpx;
    height: 60rpx;
}
.placeholder-style{
    /* color: #d43c33; */
    font-size: 30rpx;
}

熱搜榜靜態(tài)搭建

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

<view class="hotContainer">
        <view class="title">熱搜榜</view>
        <!-- 熱搜列表 -->
        <view class="hotList">
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏愛</text>
            </view>



        </view>
    </view>

熱搜榜，placeholder數(shù)據(jù)動(dòng)態(tài)展示

查看文檔

網(wǎng)易云音樂 NodeJS 版 API (binaryify.github.io)?

?返回來(lái)的數(shù)據(jù)是這樣的

書寫返回搜索數(shù)據(jù)的方法

?已經(jīng)變成了動(dòng)態(tài)數(shù)據(jù)

onLoad(options) {
        // 初始化數(shù)據(jù)
        this.getInfoData()
    },
    async getInfoData(){
        let placeholderData=await request('/search/default')
        this.setData({
            placeholderContent:placeholderData.data.showKeyword
        })
    },

?熱搜榜動(dòng)態(tài)數(shù)據(jù)

?跟之前的方法一樣

let hotListData=await request('/search/hot/detail')



hotList:hotListData.data

?然后在去添加icon

 <image class="iconImg" wx:if="{{item.iconUrl}}" src="{{item.iconUrl}}" mode=""/>

如果不添加wx:if會(huì)導(dǎo)致占空間

關(guān)鍵字模糊匹配搜索數(shù)據(jù)

這里要說(shuō)到表達(dá)項(xiàng)的倆個(gè)數(shù)據(jù)

input-->實(shí)時(shí)監(jiān)聽? ? ? ?change-->使其焦點(diǎn)

首先，我們需要拿到表單項(xiàng)的數(shù)據(jù)，然后調(diào)用接口，拿數(shù)據(jù)

?

這樣就能拿到表單項(xiàng)的內(nèi)容，但是是一個(gè)對(duì)象。

這里有一個(gè)疑惑？為什么我們沒有value={{searchList}}但是能動(dòng)態(tài)的渲染出來(lái) ?

?因?yàn)檫@個(gè)bindinput事件默認(rèn)返回的就是value的值

我們?yōu)榱诵阅軆?yōu)化，使用節(jié)流

handleInputChange(event){
        this.setData({
            searchContent:event.detail.value.trim()
        })
        // 函數(shù)節(jié)流
        if(isSend){
            return
        }
        isSend=true
        this.getSearchList()
        setTimeout(()=>{
            // 發(fā)請(qǐng)求獲取關(guān)鍵字模糊匹配數(shù)據(jù)
             isSend=false
        },300)
    },
    //獲取搜索數(shù)據(jù)的功能函數(shù)
    async getSearchList(){
        let searchListData=await request('/search',{keywords:this.data.searchContent,limit:10})
            this.setData({
                searchList:searchListData.result.songs
            })
    },

搜索列表動(dòng)態(tài)顯示

就是根據(jù)這一塊，我們先搭一個(gè)界面，然后把返回回來(lái)的數(shù)據(jù)動(dòng)態(tài)渲染到頁(yè)面上，就可以了

?樣式書寫完畢，但是又有一個(gè)bug

?當(dāng)我們刪除掉這個(gè)字母的時(shí)候，是空串，然后向服務(wù)器發(fā)請(qǐng)求，會(huì)報(bào)錯(cuò)

?我們?nèi)绻斎氲氖且粋€(gè)空串，直接return出去就可以了

看這個(gè)頁(yè)面還是很亂，搜索內(nèi)容展示與熱搜榜，應(yīng)該是一種互斥的效果

?我們通過(guò)這個(gè)wx:if來(lái)實(shí)現(xiàn)，如果數(shù)組有數(shù)據(jù)，那么就顯示，否則不顯示?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-456949.html

到了這里，關(guān)于網(wǎng)易云音樂開發(fā)--search模塊基本功能實(shí)現(xiàn)（除歷史記錄模塊）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！