本文给大家带来的是微信小程序黄色背景我的个人中心页面模板样式制作设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="page">
<!--页头-->
<view class="page__hd">
<view class="head">
<view><navigator url="/pages/my/info"><image src="{{userInfo.avatarUrl}}"></image></navigator></view>
<view><text>{{userInfo.nickName}}</text></view>
</view>
</view>
<!--主体-->
<view class="page__bd">
<view class="list">
<view class="page__bd">
<view class="weui-cells weui-cells_after-title">
<navigator url="/pages/my/list" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="/img/edit.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">发布记录</view>
<view class="weui-cell__ft weui-cell__ft_in-access">{{infoCount}}</view>
</navigator>
<navigator url="/pages/my/appointment" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="/img/appointment.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">我的预约</view>
<view class="weui-cell__ft weui-cell__ft_in-access"><view class="weui-badge" wx:if="{{appointmentCount>0}}" style="margin-left: 5px;">{{appointmentCount}}</view></view>
</navigator>
<navigator url="/pages/my/fav" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="/img/fav1.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">我的收藏</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
<navigator url="/pages/my/mydyn" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="/img/dy.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">我的动态</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
<navigator url="/pages/my/info" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="/img/me.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">个人信息</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</view>
</view>
</view>
</view>
<!--没有页脚-->
</view>
|
二、wxss样式文件代码如下：
/**index.wxss**/
.head{display:flex;flex-direction: column;background: #efefef;width:100%;padding: 100rpx 0rpx; align-items: center; justify-content: space-between;background: #f4de3b}
.head image{width:150rpx;height:150rpx;margin:0 auto;border-radius: 50%;}
.list view{font-size:12pt;}
.list .weui-cell{padding: 15px !important}
|
三、js页面代码如下：
//index.js
//获取应用实例
var app = getApp();
var util = require('../../utils/util.js');
Page({
onShow: function () {
var that = this;
that.setData({
userInfo:app.globalData.userInfo
});
util.req('info/mycount',{sk:app.globalData.sk},function(data){
that.setData({infoCount:data.data});
})
util.req('appointment/mycount', { sk: app.globalData.sk }, function (data) {
that.setData({ appointmentCount: data.data });
})
},
})
|
.jpg)
.jpg)
