简单的微信小程序个人 个人详情页

一、示例

1.个人页面

2.个人详情页面

二、示例代码

1.wxml页面

<!--pages/user/user.wxml-->
<view class="mine-wrapper"><view class="avatar-wrapper"><view><view class="avatar"><image style="border-radius:50%;" src="{{pic}}"></image></view><view class="text"><text wx:if="{{username}}">{{username}}</text><text wx:else bindtap="toLogin">注册 / 登录</text></view></view></view><view class="list-wrapper"><view><view bindtap="my" class="lists"><view class='content'> <view class="listimg"><image src="/images/用户.png"></image></view><view class="listtext">个人资料</view><view class="listicon">{{item.tips}}</view><view class="arrows"><image src="/images/右_right.png"></image></view></view></view><!-- 分割线 --><view class="divLine"></view></view><view class="alllists"><block wx:for="{{menuitems}}" wx:key="menu_for"><navigator url="{{item.url}}" class="lists"><view class='content'> <view class="listimg"><image src="{{item.icon}}"></image></view><view class="listtext">{{item.text}}</view><view class="listicon">{{item.tips}}</view><view class="arrows"><image src="{{item.arrows}}"></image></view></view></navigator><!-- 分割线 --><view class="divLine"></view></block></view></view><view class="btn" ><button style="color: rgb(8, 8, 8); background-color: rgb(11, 247, 70); "  bind:tap="lout">退出登录</button></view> 
</view>

2.scss页面 部分

.banner{width: 100%;height: 460rpx;.pic{width: 100%;height: 100%;}
}
.content{.body{padding:50rpx 30rpx;display: flex;justify-content: space-between;flex-wrap: wrap;.box{width: 330rpx;     margin-bottom:30rpx; }}