电影项目——用户信息
2019-08-29 本文已影响0人
皮皮灬
效果
image.png
// pages/profile/profile.js
Page({
/**
* 页面的初始数据
*/
data: {
},
onGotUserInfo: function (event) {
console.log(event);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
{
"usingComponents": {
"van-button": "vant-weapp/button"
},
"navigationBarTitleText": "我的"
}
<view class='profile'>
<view class="profile-img">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName" class="profile-name"></open-data>
</view>
<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
.profile{
background: #E54847;
height: 400rpx;
text-align: center;
position: relative;
width: 100%;
}
.profile-img{
width: 200rpx;
height: 200rpx;
display: block;
overflow: hidden;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, 60rpx);
}
.profile-name{
font-size: 36rpx;
color: #fff;
position: absolute;
left: 50%;
transform: translate(-50%, 270rpx);
}
