电影项目——用户信息

效果

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);
}