当前位置：网站首页>微信小程序 22 recommend和songDetail初步搭建

微信小程序 22 recommend和songDetail初步搭建

2022-07-20 16:30:00 【牟泉禹[Dark Cat]】

22.1 recommend 动态日期

在这里插入图片描述

22.2 列表区域

接口：http://localhost:3000/recommend/songs

<view class="recommendSongContainer">
<!-- 头部-->
    <view class="header">
        <image src = "/static/images/recommendSong/recommendSong.jpg"></image>
        <view class="date">
            <text class="month">{
   {month}} / </text>
            <text class="day">{
   {day}}</text>
        </view>
    </view>
<!--列表区域-->
    <view class="ListContainer">
        <view class="listHeader">
            <text>播放全部</text>
            <text class="changeMore">多选</text>
        </view>
    </view>
<!--内容区-->
    <scroll-view scroll-y="true" class="listScroll">
        <view class="scrollItem" wx:for="{
     {recommendList}}" wx:key="id">
            <image src="{
     {item.al.picUrl}}"></image>
            <view class="musicInfo">
                <text class="musicName">{
   {item.al.name}}</text>
                <text class="author">{
   {item.ar[0].name}}</text>
            </view>
            <text class="iconfont icon-gengduo-shuxiang"></text>
        </view>
    </scroll-view>
</view>

    data: {
    
        day: '',
        month: '',
        recommendList: []
    },

    /** * 生命周期函数--监听页面加载 */ async onLoad(options) {
    
        // 判断是否登录
        let userInfo = wx.getStorageSync('userInfo');
        if (!userInfo) {
    
            wx.showToast({
    
                title: "请先登录",
                icon: 'none',
                success: () => {
    
                    wx.relaunch({
    
                        url: '/pages/login/login'
                    })
                }
            })
        }
        this.setData({
    
            day: new Date().getDate(),
            month: new Date().getMonth() + 1
        });
        this.getReconmmendList();

    },

    async getReconmmendList() {
    
        let recommendListData = await request("recommend/songs", {
    });
        this.setData({
    
            recommendList: recommendListData.data.dailySongs
        })
    },

在这里插入图片描述
index 页面下做一个跳转。

在这里插入图片描述

22.3 songDetail初步搭建

<view class="songDetailContainer">
    <view class="author">beyond</view>
    <view class="circle"></view>
    <image class="needle" src="/static/images/song/needle.png"></image>

    <view class="discContainer">
        <image class="disc" src="/static/images/song/disc.png"></image>
        <image class="musicImg" src="/static/images/nvsheng.jpg"></image>
    </view>

</view>

/* pages/songDetail/songDetail.wxss */

.songDetailContainer {
    
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.needle {
    
    position: relative;
    top:-40rpx;
    left: 60rpx;
    width: 192rpx;
    height: 274rpx;
    z-index: 1;
}

.discContainer {
    
    position: relative;
    width: 550rpx;
    height: 550rpx;
    top: -170rpx;
}

.discContainer .disc{
    
    width: 550rpx;
    height: 550rpx;
}

.circle {
    
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #fff;
    margin:10rpx 0;
    z-index: 2;
}

.musicImg {
    
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 370rpx;
    height: 370rpx;
    border-radius: 50%;
}

在这里插入图片描述

css3 让摇杆动起来

先设定一个标识变量，判断摇杆是否需要放下。

在这里插入图片描述
2. 三元去写动态的 class

<image class="needle {
     {isPlay? 'needleRotate':''}}" src="/static/images/song/needle.png"></image>

.needle {
    
    position: relative;
    top:-40rpx;
    left: 60rpx;
    width: 192rpx;
    height: 274rpx;
    z-index: 1;
    transform-origin: 40rpx 0;/*设置参考点*/
    transform: rotate(-20deg);
    transition: transform 0.7s;
}

.needleRotate {
    
    transform: rotate(0deg);
}