微信小程序个人中心、我的界面（示例三）

微信小程序个人中心、我的界面、超级简单界面布局（示例三）

微信小程序个人中心、我的界面，超简洁界面，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！

1、js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navList: [{
        'count': 2,
        'title': '菜单一'
      },
      {
        'count': 0,
        'title': '菜单二'
      },
      {
        'count': 7,
        'title': '菜单三'
      },
      {
        'count': 3,
        'title': '菜单四'
      },
    ],
  },
  // 菜单
  navClick(e) {
    wx.showToast({
      title: '您点击了【' + e.currentTarget.dataset.item.title + '】',
    })
  },
})

2、wxml代码

<view class="top-box">
  <view class="level">
    <view class="level">
      <image class="head" src="../../images/not-login.png" mode="widthFix"></image>
      <view class="account">080888801</view>
    </view>
    <view class="arrow">▶</view>
  </view>
</view>
<view class="box">
  <view class="level">
    <view class="title">示例菜单</view>
    <view class="tip">全部 ▶</view>
  </view>
  <!-- 菜单栏 -->
  <view class="nav-box">
    <block wx:for="{{navList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
      <view class="nav" bind:tap="navClick" data-item="{{item}}">
        <text>{{item.count}}</text>
        <text class="gray">{{item.title}}</text>
      </view>
    </block>
  </view>
  <!-- 其他 -->
  <view class="level row">
    <view class="left">示例模板一</view>
    <view class="tip read">未读</view>
  </view>
  <view class="level row">
    <view class="left">示例模板二</view>
    <view class="tip">▶</view>
  </view>
  <view class="level row">
    <view class="left">示例模板三</view>
    <view class="tip">▶</view>
  </view>
  <view class="level row">
    <view class="left">示例模板四</view>
    <view class="tip">▶</view>
  </view>
  <view class="level row">
    <view class="left">示例模板五</view>
    <view class="tip">▶</view>
  </view>
</view>

3、wxss代码

.head {
  width: 100rpx;
  height: 100rpx;
}

.top-box {
  position: relative;
  z-index: -1;
  background-color: #ff9900;
  padding: 10rpx 20rpx;
  height: 200rpx;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.arrow {
  color: #f1f1f1;
  font-size: 26rpx;
}

.account {
  margin-left: 10rpx;
  font-size: 32rpx;
  color: #303133;
}

.box {
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  background-color: white;
  margin-top: -70rpx;
  padding: 20rpx;
}

.title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 10rpx;
}

.tip {
  font-size: 24rpx;
  color: gray;
  margin: 10rpx;
}

/* 菜单栏 */
.nav-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f4f4f5;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  border-left: 1rpx solid #f4f4f5;
  padding: 10rpx 0;
}

.nav:first-child {
  border-left: 1rpx solid transparent;
}

.gray {
  margin-top: 15rpx;
  font-size: 30rpx;
  color: #82848a;
}

.row {
  border-bottom: 1rpx solid #f4f4f5;
  padding: 25rpx 5rpx;
}

.left {
  font-size: 30rpx;
  color: #303133;
}

.read {
  background-color: #f1f1f1;
  padding: 2rpx 15rpx;
  border-radius: 50rpx;
}

4、json代码

{
  "usingComponents": {},
  "navigationBarTitleText": "我的·简洁界面示例",
  "navigationBarBackgroundColor": "#ff9900"
}

更多微信小程序示例的分享，请进入我的主页查看哦。。。