本文给大家带来的是微信小程序V2EX社区用户查找未找到用户页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<include src="/components/header.wxml" />
<view class="container" wx:if="{{isFound}}">
<view class="user">
<view class="avatar">
<image src="https:{{avatarPath}}"></image>
<text>ONLINE</text>
</view>
<view class="intro">
<view>{{userName}}</view>
<text>V2EX 第 {{id}} 号会员,加入于 {{created}}</text>
</view>
</view>
<view class="collection">
<view>
<view>0</view>
<text>节点收藏</text>
</view>
<view>
<view>0</view>
<text>主题收藏</text>
</view>
<view>
<view>0</view>
<text>特别关注</text>
</view>
</view>
<view class="topic">
<image src="{{avatarPath}}"></image>
<picker-view class="pickerview">
<picker-view-column>
<view>{{userName}} 的所有主题</view>
<view>123</view>
<view>abc</view>
</picker-view-column>
</picker-view>
</view>
<view class="reply">
<view>{{userName}} 最近回复了</view>
<navigator url="/pages/gravatar/gravatar" open-type="redirect">» {{userName}} 创建的更多回复</navigator>
</view>
</view>
<view class="container" wx:if="{{!isFound}}">
<include src="/components/crumbs.wxml" />
<view class="not-found">未找到用户</view>
</view>
<include src="/components/footer.wxml" />
|
二、wxss样式文件代码如下：
/*********容器**********/
.container {
display: flex;
flex-direction: column;
width: 95%;
margin: 0 auto;
}
.container > view {
margin-bottom: 15rpx;
border-radius: 10rpx;
background-color: #fefefe;
box-shadow: 2px 2px 3px #00343f;
}
/*********容器**********/
/*********user**********/
.user {
background-color: #fff;
height: 180rpx;
display: flex;
justify-content: space-between;
}
.user .avatar {
box-sizing: border-box;
padding: 10rpx 0 30rpx;
width: 150rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.user .avatar image {
width: 75rpx;
height: 75rpx;
border-radius: 10rpx;
}
.user .avatar text {
display: block;
width: 104rpx;
height: 28rpx;
line-height: 28rpx;
border-radius: 20rpx;
background-color: #4aa210;
font-size: 22rpx;
color: #fff;
text-align: center;
}
.user .intro {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.user .intro view {
font-weight: bolder;
font-size: 40rpx;
}
.user .intro text {
font-size: 25rpx;
color: #999;
}
/*********user**********/
/*********collection**********/
.collection {
height: 100rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.collection > view {
flex: 1;
height: 80rpx;
border-right: 1px solid #eee;
text-align: center;
}
.collection > view:last-of-type {
border: 0;
}
.collection text {
color: #999;
font-size: 28rpx;
}
/*********collection**********/
/*********topic**********/
.topic {
padding: 0 30rpx;
height: 84rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.topic image {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
.pickerview {
width: 40%;
height: 100%;
}
.pickerview view{
display: flex;
align-items: center;
justify-content: center;
}
/*********topic**********/
/*********reply**********/
.reply{
font-size: 26rpx;
}
.reply > view{
padding-left: 10rpx;
height: 45rpx;
line-height: 45rpx;
border-bottom: 1px solid #eee;
color: #999;
}
.reply > navigator{
padding-left: 10rpx;
height: 65rpx;
line-height: 65rpx;
align-items: center;
color: #777;
}
/*********reply**********/
/*********not found 样式**********/
.not-found {
text-align: center;
color: #999;
font-size: 30rpx;
height: 50rpx;
line-height: 50rpx;
}
/*********not found 样式**********/
|
三、js页面代码如下：
import format from '../../utils/format.js'
Page({
onLoad() {
this.initData()
this.renderCrumbs()
},
renderCrumbs() {
let
pages = getCurrentPages(),
routes = {}
for (let page of pages) {
let
path = page.route,
pageName = page.route.split('/')[1]
routes[pageName] = path
}
this.setData({ routes })
},
initData() {
let
data = getApp().globalData.userInfo,
isFound = data.status === 'found',
id = data.id,
avatarPath = data.avatar_mini,
userName = data.username,
created = format(data.created)
this.setData({ isFound, id, avatarPath, userName, created })
}
})
|
.jpg)
.jpg)
