微信小程序 15 个人中心页_小程序个人中心页

15.1 个人中心页的基本搭建

---

<view class="personalContainer">
    <view class="user-section">
        <image class="bg" src="/static/images/personal/bgImg2.jpg"></image>
        <view class="user-info-box" bindtap="toLogin">
            <view class="portrait-box">
                <image class="portrait" src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
            </view>
            <view class="info-box">
                <text class="username">{{userInfo.nickname?userInfo.nickname: '游客'}}</text>
            </view>
        </view>

        <view class="vip-card-box">
            <image class="card-bg" src="/static/images/personal/vip-card-bg.png" mode=""></image>
            <view class="b-btn">
                立即开通
            </view>
            <view class="tit">
                <!-- 会员图标-->
                <text class="iconfont icon-huiyuan-"></text>
                云音乐会员
            </view>
            <text class="e-m">atguigu Union</text>
            <text class="e-b">开通会员听歌, 撸代码</text>
        </view>
    </view>


    <view
            class="cover-container"
            bindtouchstart="handleTouchStart"
            bindtouchmove="handleTouchMove"
            bindtouchend="handleTouchEnd"
            style="transform: {{coverTransform}}; transition: {{coverTransition}}"
    >
        <image class="arc" src="/static/images/personal/arc.png"></image>
        <!-- 个人中心导航 -->
        <view class="nav-section">
            <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-xiaoxi"></text>
                <text>我的消息</text>
            </view>
            <view class="nav-item"   hover-class="common-hover" hover-stay-time="50">
                <text class="iconfont icon-myRecommender"></text>
                <text>我的好友</text>
            </view>
            <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-gerenzhuye"></text>
                <text>个人主页</text>
            </view>
            <view class="nav-item" hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-gexingzhuangban"></text>
                <text>个性装扮</text>
            </view>
        </view>

        <!-- 个人中心列表 -->
        <view class="personalContent">
            <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>

            <view class="cardList">
                <view class="card-item">
                    <text class="title">我的音乐</text>
                    <text class="more"> > </text>
                </view>
                <view class="card-item">
                    <text class="title">我的收藏</text>
                    <text class="more"> > </text>
                </view>
                <view class="card-item">
                    <text class="title">我的电台</text>
                    <text class="more"> > </text>
                </view>
            </view>
        </view>
    </view>

</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/* pages/personal/personal.wxss */
.personalContainer {
    width: 100%;
    height: 100%;

}

.personalContainer .user-section {
    height: 520rpx;
    position: relative;
    padding: 100rpx 30rpx 0;
}
.user-section .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: blur(1px);
}


.user-info-box{
    height: 180rpx;
    display:flex;
    align-items:center;
    position:relative;
    z-index: 1;

}

.user-info-box .portrait{
    width: 130rpx;
    height: 130rpx;
    border:5rpx solid #fff;
    border-radius: 50%;
}
.user-info-box .username{
    font-size: 24;
    color: #303133;
    margin-left: 20rpx;
}


/* vip-box */
.vip-card-box {
    position: relative;
    display: flex;
    flex-direction: column;
// background: linear-gradient(left, red, black);
    background: rgba(0, 0, 0, .7);
    height: 240rpx;
    color: #f7d680;
    border-radius: 16rpx 16rpx 0 0;
    padding: 20rpx 24rpx;
}


.vip-card-box .card-bg{
    position:absolute;
    top: 20rpx;
    right: 0;
    width: 380rpx;
    height: 260rpx;
}

.vip-card-box .b-btn{
    position: absolute;
    right: 20rpx;
    top: 16rpx;
    width: 132rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 22rpx;
    color: #36343c;
    border-radius: 20px;
    background: #f9e6af;
    z-index: 1;
}

.vip-card-box .b-btn{
    position: absolute;
    right: 20rpx;
    top: 16rpx;
    width: 132rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 22rpx;
    color: #36343c;
    border-radius: 20px;
    /*background: linear-gradient(left, #f9e6af, #ffd465);*/ /*渐变不生效*/
    background: #f9e6af;
    z-index: 1;
}

.vip-card-box .tit {
    font-size: 22rpx;
    color: #f7d680;
    margin-bottom: 28rpx;
}
.vip-card-box .tit .iconfont{
    color: #f6e5a3;
    margin-right: 16rpx;
}




.vip-card-box .e-m{
    font-size: 34rpx;
    margin-top: 10rpx;
}
.vip-card-box .e-b{
    font-size: 24rpx;
    color: #d8cba9;
    margin-top: 10rpx;
}


.cover-container{
    margin-top: -150rpx;
    padding: 0 30rpx;
    position:relative;
    background: #f5f5f5;
    padding-bottom: 20rpx;
}

.cover-container .arc{
    position:absolute;
    left: 0;
    top: -34rpx;
    width: 100%;
    height: 36rpx;
}


/* 导航部分 */
.cover-container .nav-section {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    border-radius: 15rpx;
}


.nav-section .nav-item {
    width: 25%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-section .nav-item .iconfont {
    font-size: 50rpx;
    color: #d43c33;
    line-height: 70rpx;
}

.nav-section .nav-item text:last-child {
    font-size: 22rpx;

}


/* 个人中心列表 */
.personalContent {
    background: #fff;
    margin-top: 20rpx;
}

/* 最近播放 */
.personalContent .scrollView {
    display: flex;
    height: 160rpx;
}
.personalContent .recentPlay {
    display: flex;
}

.recentPlayContainer .title {
    padding-left: 20rpx;
    font-size: 26rpx;
    color: #333;
    line-height: 80rpx;
}

.personalContent .recentPlay image {
    width: 160rpx;
    height: 160rpx;
    margin-left: 20rpx;
    border-radius: 20rpx;
}


.cardList {
    margin-top: 20rpx;

}
.cardList .card-item{
    border-top: 1rpx solid #eee;
    height: 80rpx;
    line-height: 80rpx;
    padding: 10rpx;
    font-size: 26rpx;
    color: #333;
}
.cardList .card-item .more {
    float: right;
}

/* 最近播放记录 */
.recentScroll {
    display: flex;
    height: 200rpx;
}
.recentItem {
    margin-right: 20rpx;
}
.recentItem image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227

---

15.2 用 css3新特性 实现动画效果

bindtouchstart：触摸开始事件
bindtouchmove：触摸滑动事件
bindtouchend：触摸结束事件

手机上，其实 这三个 事件 挺重要的。本来 也没有多少事件呀。。

transform:translateY() 可以让一块区域的所有东西 在 y 轴上 移动到指定位置。

transform:translateY() 可以让一块区域的所有东西 在 y 轴上 移动到指定位置。

transition: transform 1s linear：动画的 过渡需要时间。

// pages/personal/personal.js
let startY = 0;
let moveY = 0;
let distanceY = 0;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        coverTransform:"translateY(0)",
        coverTransition:''
    },
    handleTouchStart(event){
        this.setData({
            coverTransition: ``
        })
        startY = event.touches[0].clientY; // 0 代表的是 第一个 触碰的手指
    },
    handleTouchMove(event){
        moveY = event.touches[0].clientY;
        distanceY = moveY - startY;
        if(distanceY >= 0 && distanceY <= 80){
            this.setData({
                coverTransform:`translateY(${distanceY}rpx)`
            })
        }
    },
    handleTouchEnd(event){
        this.setData({
            coverTransform: `translateY(0rpx)`,
            coverTransition: `transform 0.5s linear`
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90