简单的微信小程序个人 个人详情页
一、示例1.个人页面
https://i-blog.csdnimg.cn/direct/e08a81607d774d2f90c1723cac0f9651.png
2.个人详情页面
https://i-blog.csdnimg.cn/direct/dbbfc5771031468cb33259efefd9e666.png
二、示例代码
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;
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]