基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（3）会员首页 班级信息、宿舍信息、课程排班表

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（3）会员首页 班级信息、宿舍信息、课程排班表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3440字，纯文字阅读大概需要5分钟。

内容图文

界面

wxml代码

<!--头部信息--> 
<view class='toubu'>
  <view class='toubu-zuo'>
    <open-data type="userAvatarUrl" class="toubu-zuo-touxiang"></open-data>
  </view>
  <view class='toubu-you'>
    <view class='toubu-you-txt1'>
      <open-data type="userNickName"></open-data>
    </view>
    <view class='toubu-you-txt2'>
    姓名：{{u_xingming}} 
    </view>
    <view class='toubu-you-txt3'>
    学号：{{u_xuehao}}
    </view>
  </view>
</view>

<navigator url='/pages/index/index' open-type='switchTab' class='caidan'>
  <image class='caidan-icon' src='/img/sp01.png'></image>
  <text class='caidan-text'>回到首页</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/banji?u_banji_id={{u_banji_id}}' class='caidan'>
  <image class='caidan-icon' src='/img/sys01.png'></image>
  <text class='caidan-text'>班级信息</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/sushe?xuesheng_id={{u_id}}' class='caidan'>
  <image class='caidan-icon' src='/img/a-on.png'></image>
  <text class='caidan-text'>宿舍安排</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/kechengbiao?cs_banji_id={{u_banji_id}}' class='caidan'>
  <image class='caidan-icon' src='/img/qita.png'></image>
  <text class='caidan-text'>排班课程表</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/xinxi' class='caidan'>
  <image class='caidan-icon' src='/img/sys05.png'></image>
  <text class='caidan-text'>用户信息</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<block wx:if="{{str_u_name=='微信用户'}}">

</block>
<block wx:else>
<!-- <navigator url='/pages/huiyuan/mima' class='caidan'>
  <image class='caidan-icon' src='/img/m04.png'></image>
  <text class='caidan-text'>密码修改</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator> -->
</block>

<view bindtap='tuichu' class='caidan'>
  <image class='caidan-icon' src='/img/m05.png'></image>
  <text class='caidan-text'>退出登录</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</view>




<view class='sys_caidan'>
  <navigator class='sys_caidan_xiangmu' url='/pages/index/index' open-type='switchTab'>
    <image src='/images/a-on.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt sys_caidan_xiangmu_xuanzhong'>首页</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu'  url='/pages/yuyue/index' open-type='switchTab'>
    <image src='/images/b-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>预约</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/index'  open-type='switchTab'>
    <image src='/images/d-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>我的</view>
  </navigator>
</view>

wxss代码

/*头部信息*/
.toubu {
    display: flex;
    margin: 1px;
    padding: 10px;
    background-color: crimson;
  }
  .toubu-zuo {}
  .toubu-zuo-touxiang {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 3px 3px 10px gainsboro;
    display: block;
    overflow: hidden;
  }
  .toubu-you {
    padding-left: 10px;
  }
  .toubu-you-txt1 {
    color: white;
  }
  .toubu-you-txt2 {
    background-color: darkorange;
    color: white;
    margin: 5px 0px;
    padding: 5px;
  }
  .toubu-you-txt3 {
    color: white;
  }
  
  .caidan{
    display: flex;
    padding: 10px; 
    border-bottom: 1px solid gainsboro;
  }
  .caidan-icon{
    width: 20px; height: 20px;
  }
  .caidan-text{
    flex-grow: 1;
    margin-left: 10px;
  }
  .caidan-arrow{
    width: 16px; height: 16px;
  }

内容总结

以上是互联网集市为您收集整理的基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（3）会员首页 班级信息、宿舍信息、课程排班表全部内容，希望文章能够帮你解决基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（3）会员首页 班级信息、宿舍信息、课程排班表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---