微信小程序 27 进度条的动态实现和搜索框、热搜榜的静态搭建

27.1 进度条的动态实现

---

        // 音乐管理者实时播放的进度
        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
                });
            }
            // 现在的时间/总时间 = 现在的进度条宽度/总进度条宽度
            // 现在的进度条宽度 = 现在的时间/总时间 * 总进度条宽度
            this.setData({
                currentWidth:appInstance.globalData.backgroundAudioManager.currentTime * 1000/ this.data.durationSS * 450
            })
        });
         // 音乐自然结束的事件
        appInstance.globalData.backgroundAudioManager.onEnded(() => {
            PubSub.publish("switchType","next");// 发送 next 请求
            this.setData({ // 还原进度条的 长度
                currentWidth: 0,
                currentTime: '00:00'
            })
        })

音乐自然结束后，应该播放下一首歌，而这个操作 其实 就是发送一个 publish 就可以做到的。

---

27.2 搜索框、热搜榜的静态搭建

{
    "usingComponents": {},
    "navigationBarTitleText": "搜索音乐"
}

<view class="searchContainer">
<!--    头部-->
    <view class="header">
        <view class="searchInput">
            <text class="iconfont icon-search searchIcon"></text>
            <input type="text" placeholder="搜索歌曲" placeholder-class="placeholder"></input>
        </view>
        <text class="cancel">取消</text>
    </view>
<!--热搜榜-->
    <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>
    </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 新特性之一，可以将 placeholder 设置 class 和 样式*/
.placeholder {
    color: #d43c33;
    font-size: 28rpx;
}

/*热搜榜*/
.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;
}