Dynamic implementation of wechat applet 27 progress bar and static construction of search box and hot search list

27.1 Dynamic implementation of progress bar

---

        //  The progress of the music manager's real-time playback 
        appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {
    
            let currentTime = moment(appInstance.globalData.backgroundAudioManager.currentTime * 1000).format('mm:ss');
            if(this.data.isPlay && this.data.song.id == this.data.preMusicId){
    
                this.setData({
    
                    currentTime
                });
            }
            //  Time now / Total time  =  The current progress bar width / Total progress bar width 
            //  The current progress bar width  =  Time now / Total time  *  Total progress bar width 
            this.setData({
    
                currentWidth:appInstance.globalData.backgroundAudioManager.currentTime * 1000/ this.data.durationSS * 450
            })
        });
         //  The natural end of music 
        appInstance.globalData.backgroundAudioManager.onEnded(() => {
    
            PubSub.publish("switchType","next");//  send out  next  request 
            this.setData({
     //  Restore progress bar's   length 
                currentWidth: 0,
                currentTime: '00:00'
            })
        })

After the music naturally ends , The next song should be played , And this operation Actually Just send a publish You can do it .

---

27.2 Search box 、 Static construction of hot search list

{
    
    "usingComponents": {
    },
    "navigationBarTitleText": " Search for music "
}

<view class="searchContainer">
<!--  Head -->
    <view class="header">
        <view class="searchInput">
            <text class="iconfont icon-search searchIcon"></text>
            <input type="text" placeholder=" Search the song " placeholder-class="placeholder"></input>
        </view>
        <text class="cancel"> Cancel </text>
    </view>
<!-- Hot search list -->
    <view class="hotContainer">
        <view class="title"> Hot search list </view>
<!--  Hot search list -->
        <view class="hotList">
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text> A preference for </text>
            </view>
        </view>
    </view>

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

.cancel {
    
    width: 100rpx;
    text-align: center;
}

.searchIcon {
    
    position: absolute;
    left: 15rpx;
}

.searchInput input{
    
    margin-left: 50rpx;
    height: 60rpx;
}

/*h5  One of the new features , Can be  placeholder  Set up  class  and   style */
.placeholder {
    
    color: #d43c33;
    font-size: 28rpx;
}

/* Hot search list */
.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;
}