首页 > 小程序教程 > 微信小程序V2EX社区用户查找未找到用户页面设计制作开发教程

微信小程序V2EX社区用户查找未找到用户页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序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 })
  }
})

模板简介:该模板名称为【微信小程序V2EX社区用户查找未找到用户页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,967次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-23
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信模板 html5 微信素材 微信公众平台 企业网站 自适应 微信文章 响应式 微信图片
您可能会喜欢的其他模板