微信小程序 18 播放记录和video页面初步搭建

18.1 播放记录的实现

---

接口：http://localhost:3000/user/record?uid=1426373762&type=1

所以我们只要拿到 这个 数据，然后 让其 显示到 页面上就可以了。

1. 拿到这个数据

    /**
     * 生命周期函数--监听页面显示
     */ async onShow() {
        //http://localhost:3000/?uid=1426373762&type=1
        if (this.data.userInfo) {
            let recordData = await request("user/record", {
                uid: this.data.userInfo.userId,
                type: 1
            });
            this.setData({
                recentPlayList: recordData.weekData
            })
        }
    },

 <view class="recentPlayContainer">
                <text class="title">最近播放</text>
                <!-- 最近播放记录 -->
                <scroll-view wx:if="{{recentPlayList.length}}" scroll-x class="recentScroll" enable-flex>
                    <view class="recentItem" wx:for="{{recentPlayList}}" wx:key="{{id}}">
                        <image src="{{item.song.al.picUrl}}"></image>
                    </view>
                </scroll-view>
                <view wx:else>暂无播放记录</view>
            </view>

可以说是 十分的简单呀。。因为 跟 前面 很多东西 的原理 都是类似的。就是 拿到 数据，然后 设计 一下 页面和样式。

---

18.2 video 页面初步搭建

1. 头部区域

<view class="videoContainer">
<!--    头部区域-->
    <view class="header">
        <image src="/static/images/video/video.jpg"></image>
        <view class="search">
            搜索商品
        </view>
        <image src="/static/images/logo.png"></image>
    </view>
</view>

• flex-grow 可拉伸 flex-shrink 可压缩 flex-basis 设置当前元素的宽度
• flex 默认三个值: flex-grow(0) flex-shrink(1) flex-basis(auto) 也就是说它不支持 拉伸
• flex: 1 之后，就是 flex-grow(1) flex-shrink(1) flex-basis(0%)*/
• 当 flex: 1 后，父元素 宽度 就会变为 100 %，也就不是 你设定的那个值了。
• flex-basis(auto) 意思是说 首先 以 设定的 宽度 为 主，如果比较大的话，那么 其它元素可能被压缩。
  但 绝对不会 超出 页面的宽度。如果比较小的话，会被 自适应。

.videoContainer .header {
    display: flex;
    margin: 20rpx 0;
}


.videoContainer .header image {
    width: 60rpx;
    height: 60rpx;
}

.videoContainer .header .search {
    border: 1rpx solid #eee;
    flex: 1;
    font-size: 26rpx;
    text-align: center;
    line-height: 60rpx;
    margin: 0 20rpx;
    color: #d43c33;
    border-radius: 20rpx;
}

2. 导航区域

<!--    导航区域-->
    <scroll-view scroll-x="true" class="navScroll" enable-flex="true">
        <view class="navItem">
            <view class="navContent active">
                A
            </view>
        </view>
        <view class="navItem">
            <view class="navContent">
                B
            </view>
        </view>
    </scroll-view>

/*导航区域*/
.navScroll {
    display: flex;
    white-space: nowrap; /*不让子元素 换行*/
}

.navScroll .navItem {
    padding: 0 30rpx;
    font-size: 28rpx;
    height: 60rpx;
    line-height: 60rpx;
}
.navItem .active {
    border-bottom: 1rpx solid #d43c33;
}

3. 动态数据介入

接口：http://localhost:3000/video/group/list

    /**
     * 生命周期函数--监听页面加载
     */ async getVideoGroupListData() {
        let videoGroupListData = await request("video/group/list",{});
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14)
        })
    },
    onLoad(options) {
         // 获取 导航标签的数据
        this.getVideoGroupListData();
    },

<!--    导航区域-->
    <scroll-view scroll-x="true" class="navScroll" enable-flex="true">
        <view class="navItem" wx:for="{{videoGroupList}}" wx:key="id">
            <view class="navContent active">
                {{item.name}}
            </view>
        </view>
    </scroll-view>

4. 实现点击哪个标签，哪个标签 就高亮的需求。

// pages/login/login.js
import request from "../../utils/request";

Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoGroupList: [],
        navId:"" // 导航的标识
    },

    changeNav(event){
        let navId = event.currentTarget.id;
        this.setData({
            navId: navId
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */ async getVideoGroupListData() {
        let videoGroupListData = await request("video/group/list",{});
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id
        })
    },
    onLoad(options) {
         // 获取 导航标签的数据
        this.getVideoGroupListData();
    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

<!--    导航区域-->
    <scroll-view scroll-x="true" class="navScroll" enable-flex="true">
        <view class="navItem" wx:for="{{videoGroupList}}" wx:key="id">
            <view class="navContent {{navId == item.id? 'active':''}}" bindtap="changeNav" id="{{item.id}}">
                {{item.name}}
            </view>
        </view>
    </scroll-view>