一、示例
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; }}