微信小程序个人中心、我的界面

微信小程序个人中心、我的界面、自定义顶部状态栏、页面监听跳转、简单界面布局

微信小程序个人中心、我的界面，自定义顶部状态栏，实现滚动隐藏显示状态信息，界面简单，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！

1、js代码

const WXAPI = require('../../wxapi/main');
const PAY = require('../../utils/pay');
const app=getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showPircePop:false,
    baseurl:'',
    freenum:0,
    priceIndex:-1,
	authorize:false,
    barHeight: 30, //  顶部状态栏高度
	navBarHeight: 66, // 顶部高度
	staticlist:[0,0],
	navlist: ['收信箱', '发信箱'],
    navstatus: [1, 2],
  },
    // 查看详情监听
    detailClick() {
        wx.showToast({
            title: '暂未开发',
            icon: 'none'
        })
        // wx.navigateTo({
        //     url: '/pages/index/index',
        // })
	},
	/**
   * 获取订单数据
   */
  getdata(page) {
    let current = this.data.current
    let status = this.data.navstatus
    const that = this
    let apidata = {
      page: this.data.page,
      pagesize: this.data.pagesize,
      status: status[current]
	}
    WXAPI.getnote(apidata).then(function (res) {
      if (res.list.length < apidata.pagesize) {
        that.setData({
          islast: true,
        })
      }
      for (let obj of res.list) {
        obj.payprice=parseFloat(obj.payprice)
      }
      let list = that.data.list;
      list = list.concat(res.list);
      that.setData({
        loading: false,
        list: list,
        staticlist:res.staticlist
      })
	})
  },
  /**打开套餐面板 */
  onPriceOpen(){
    this.setData({
      showPircePop:true,
      priceIndex:-1,
    })
  },
  /**选择价格 */
  onPriceSelected(e){
    const that=this
    let index=e.currentTarget.dataset.index
    if(index==this.data.priceIndex){
        return
    }
    let item=this.data.messlist[index]
    this.setData({
      priceIndex:index
    })

    PAY.pay({
      url:WXAPI.messorderurl,
      payprice:item.price,
      messid:item.id,
      num:item.title,
      freenum:item.title,
    }).then(res=>{
      that.setData({
        showPircePop:false
      })
      if(res.status==1){
        wx.showToast({
          title: res.info,
          success:()=>{
            wx.navigateTo({
              url: '/pages/order/index',
            })
          }
        })
      }else{
        wx.showToast({
          title: res.info,
          icon:"error"
        })
      }
    })
  },
  onError(){
    wx.showToast({
		title: '暂未开发',
		icon: 'error'
	  })
  },
  /*编辑个人信息*/
  toedit(){
    wx.navigateTo({
      url: '/pages/mine/edit',
    })
  },
  onPriceClose(){
    this.setData({
      showPircePop:false
    })
  },

  onCopy(){
      wx.setClipboardData({
        data: this.data.userinfo.openid,
      })
  },

  tofabu(){
    wx.navigateTo({
      url: '/pages/topic/fabu',
    })
  },

  tostar(){
    wx.navigateTo({
      url: '/pages/topic/star',
    })
  },

  toorder(){
    wx.navigateTo({
      url: '/pages/order/index',
    })
  },

  toqa(){
    wx.navigateTo({
      url: '/pages/about/index',
    })
  },

  toabout()