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

一、示例

1.个人页面

2.个人详情页面

二、示例代码

1.wxml页面

1. <!--pages/user/user.wxml-->
2. <view class="mine-wrapper">
3.   <view class="avatar-wrapper">
4.     <view>
5.       <view class="avatar">
6.       
7.         <image style="border-radius:50%;" src="{{pic}}"></image>
8.       </view>
9.       <view class="text">
10.         <text wx:if="{{username}}">{{username}}</text>
11.         <text wx:else bindtap="toLogin">注册 / 登录</text>
12.       </view>
13.     </view>
14.   </view>
15.   <view class="list-wrapper">
16.   <view>
17.     <view bindtap="my" class="lists">
18.         <view class='content'>
19.           <view class="listimg">
20.             <image src="/images/用户.png"></image>
21.           </view>
22.           <view class="listtext">个人资料</view>
23.           <view class="listicon">{{item.tips}}</view>
24.           <view class="arrows">
25.             <image src="/images/右_right.png"></image>
26.           </view>
27.         </view>
28.     </view>
29.         <!-- 分割线 -->
30.         <view class="divLine"></view>
31.   </view>
33.     <view class="alllists">
34.       <block wx:for="{{menuitems}}" wx:key="menu_for">
35.         <navigator url="{{item.url}}" class="lists">
36.         <view class='content'>
37.           <view class="listimg">
38.             <image src="{{item.icon}}"></image>
39.           </view>
40.           <view class="listtext">{{item.text}}</view>
41.           <view class="listicon">{{item.tips}}</view>
42.           <view class="arrows">
43.             <image src="{{item.arrows}}"></image>
44.           </view>
45.         </view>
46.         </navigator>
47.         <!-- 分割线 -->
48.         <view class="divLine"></view>
49.       </block>
50.     </view>
51.   </view>
53.   <view class="btn" >
54.     <button style="color: rgb(8, 8, 8); background-color: rgb(11, 247, 70); "  bind:tap="lout">退出登录</button>
55.     </view>
56. </view>

复制代码

2.scss页面 部分

1. .banner{
2.   width: 100%;
3.   height: 460rpx;
4.   .pic{
5.     width: 100%;
6.     height: 100%;
7.   }
8. }
9. .content{
10.   .body{
11.     padding:50rpx 30rpx;
12.     display: flex;
13.     justify-content: space-between;
14.     flex-wrap: wrap;
15.     .box{
16.       width: 330rpx;     
17.       margin-bottom:30rpx;
18.     }
19.   }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。