这个是我们小组在开发的一个消息界面，用于实现简单的交流通信功能，只实现了简单的前端框架，下面献上代码供大家参考学习，若有不足，请多多指教。
wxml部分
!--头部消息中心--viewclass='title'style='height:{{navH}}px'catchtouchmove='true'viewclass='title-text'消息中心/view!--私信、通知切换栏--viewstyle='margin-top:{{navH}}px'catchtouchmove='true'viewviewdata-current="0"bindtap="clickTab"私信!--气泡提示--viewclass='bubble'viewclass='num'3/view/view/viewviewdata-current="1"bindtap="clickTab"通知!--气泡提示--viewclass='bubble2'viewclass='num'21/view/view/view/viewviewclass='onTabLine'style="margin-left:{{175+currentTab273}}rpx"catchtouchmove="ture"/viewviewclass='line'/view/view/view!--私信消息列表--scroll-viewscroll-y="true"style="margin-top:{{navH+47}}px;height:1200rpx"wx:if="{{currentTab==0}}"!--示例用户1--viewclass='user'bindtap='goTocontactPage'imageclass='header-icon'src='/images/icon1.jpeg'/imageviewclass='user-content'viewclass='firstline'viewclass='apart'viewclass='username'text测试1/text/viewviewclass='cooperation'imagesrc='./images/6.png'/image/view/viewviewclass='time'viewclass='time-num'9:36/view/view/viewviewclass='secondline'viewclass='dialog'text你想要怎么拍呢？/text/viewviewclass='dialog-nums'viewclass='bubble3'viewclass='num'2/view/view/view/view/view/view!--分割线--viewclass='linecut'/view!--示例用户2--viewclass='user'bindtap='goTocontactPage'imageclass='header-icon'src='https://b267.photo.store.qq.com/psb?/V13v0ZyH3zvYu7/9Neobpt0tAkfi3fZZij7.1VF4qT363gGq021zfYWQ0!/b/dAsBAAAAAAAA&bo=bgFuAQAAAAAFByQ!&rf=viewer_4'/imageviewclass='user-content'viewclass='firstline'viewclass='apart'viewclass='username'text测试2/text/viewviewclass='cooperation'!--imagesrc='./images/6.png'/image--/view/viewviewclass='time'viewclass='time-num'8:16/view/view/viewviewclass='secondline'viewclass='dialog'text约拍时间是这周六下午的两点钟/text/viewviewclass='dialog-nums'viewclass='bubble3'viewclass='num'1/view/view/view/view/view/view!--分割线--viewclass='linecut'/view/scroll-view!--关注消息列表框--scroll-viewscroll-ystyle="margin-top:{{navH+47}}px;height:1800rpx;"wx:if="{{currentTab==1}}"!--系统通知--viewclass='notify-type'bindtap='goToSystemPage'viewclass='notify-icon'imagesrc='./images/tongzhi.png'/image/viewviewclass='notify-name'系统通知viewclass='notify-num'viewclass='nums'11/view/view/viewviewclass='right'!--imagesrc=''/image--/view/viewviewclass='liner'/view!--点赞--viewclass='thumbs-up-type'bindtap='goToDianzanPage'viewclass='notify-icon'imagesrc='./images/dianzan.png'/image/viewviewclass='thumbs-up-name'点赞viewclass='thumbs-up-num'viewclass='nums'6/view/view/viewviewclass='right'!--imagesrc=''/image--/view/viewviewclass='liner'/view!--评论--viewclass='dialog-type'bindtap='goToCommentPage'viewclass='dialog-icon'imagesrc='./images/dialog.png'/image/viewviewclass='dialog-name'评论viewclass='dialog-num'viewclass='nums'2/view/view/viewviewclass='right'!--imagesrc=''/image--/view/viewviewclass='liner'/view!--我关注的--viewclass='follow-type'bindtap='goToConcernPage'viewclass='follow-icon'imagesrc='./images/guanzhu.png'/image/viewviewclass='follow-name'我关注的viewclass='follow-num'viewclass='nums'1/view/view/viewviewclass='right'!--imagesrc=''/image--/view/viewviewclass='liner'/view!--底部消息提示框--viewtext您有21条未读通知/text/view/scroll-view!--底部导航--tabbartabbar="{{tabbar}}"/tabbarwxss部分
/头部标题/.title{width:100%;/overflow:hidden;/position:fixed;top:0;left:0;background:#fff;z-index:999;}.title-text{width:100%;height:45px;line-height:45px;text-align:center;position:absolute;bottom:0;left:0;font-size:40rpx;font-weight:500;}/私信、通知/.flex-row{flex-direction:row;display:flex;}.onTabLine{width:120rpx;height:5rpx;background-color:#4074DD;margin-top:15rpx;}.line{width:750rpx;height:2rpx;background-color:#F2F2F2;margin:0rpxauto0auto;}.message,.notify{display:flex;flex-direction:row;font-size:36rpx;margin-top:20rpx;width:120rpx;color:#CDCDCD;}.message{margin-left:200rpx;}.notify{margin-left:150rpx;}.active{color:#4074DD;}.selectTab{position:fixed;background-color:#fff;z-index:100;}/气泡框样式/.bubble{background-color:#4074DD;border-radius:50rpx;width:30rpx;height:30rpx;position:relative;left:10rpx;bottom:10rpx;}.bubble.num{font-size:24rpx;color:#ffffff;margin-left:8rpx;margin-top:-2rpx;}.bubble2{background-color:#4074DD;border-radius:20rpx;width:40rpx;height:30rpx;position:relative;left:10rpx;bottom:10rpx;}.bubble2.num{font-size:24rpx;color:#ffffff;margin-left:8rpx;margin-top:-2rpx;}/私信消息/.message-list{/background-color:#f2f2f2;/display:flex;flex-direction:column;}.user{display:flex;flex-direction:row;}.user-content{display:flex;flex-direction:column;}.header-icon{width:104rpx;height:104rpx;border-radius:80rpx;margin-left:20rpx;margin-top:26rpx;}.firstline{display:flex;flex-direction:row;}.apart{margin-left:20rpx;display:flex;flex-direction:row;width:400rpx;}.username{font-size:36rpx;margin-top:26rpx;font-weight:400;}.cooperation{width:40rpx;}.cooperationimage{width:40rpx;height:34rpx;margin-top:34rpx;margin-left:10rpx;}.time{display:flex;width:60rpx;font-size:24rpx;margin-top:36rpx;color:#aeaeae;margin-left:140rpx;}.time-num{/margin-right:200rpx;/}/内容第二行/.secondline{display:flex;flex-direction:row;}/对话框消息内容/.dialog{width:545rpx;font-size:28rpx;color:#aeaeae;margin-left:20rpx;margin-top:15rpx;}/对话框提示数目/.dialog-nums{/width:100rpx;/}/气泡样式/.bubble3{background-color:#4074DD;border-radius:80rpx;width:40rpx;height:40rpx;/margin-left:200rpx;/margin-top:20rpx;}.bubble3.num{font-size:28rpx;color:#ffffff;font-weight:500;margin-left:12rpx;}/分割线/.linecut{width:100%;height:2rpx;background-color:#F2F2F2;margin-top:26rpx;}/通知界面//系统通知/.notify-type{display:flex;flex-direction:row;}.notify-icon{margin-left:20rpx;margin-top:20rpx;}.notify-iconimage{width:80rpx;height:80rpx;}.notify-name{font-size:36rpx;font-weight:500;margin-top:35rpx;margin-left:36rpx;}.notify-num{width:40rpx;height:30rpx;background-color:red;border-radius:40rpx;display:flex;flex-direction:row;position:relative;bottom:60rpx;left:150rpx;}.notify-num.nums{font-size:24rpx;color:#fff;margin-left:8rpx;margin-bottom:6rpx;}/最帅的分割线/.liner{width:100%;height:2rpx;background-color:#F2F2F2;margin-top:20rpx;}/点赞/.thumbs-up-type{display:flex;flex-direction:row;}.thumbs-up-icon{margin-left:20rpx;margin-top:20rpx;}.thumbs-up-iconimage{width:80rpx;height:80rpx;}.thumbs-up-name{font-size:36rpx;font-weight:500;margin-top:35rpx;margin-left:36rpx;}.thumbs-up-num{width:30rpx;height:30rpx;background-color:#4074DD;border-radius:40rpx;display:flex;flex-direction:row;position:relative;bottom:60rpx;left:80rpx;}.thumbs-up-num.nums{font-size:24rpx;color:#fff;margin-left:8rpx;margin-bottom:6rpx;}/评论/.dialog-type{display:flex;flex-direction:row;}.dialog-icon{margin-left:30rpx;margin-top:35rpx;}.dialog-iconimage{width:65rpx;height:65rpx;}.dialog-name{font-size:36rpx;font-weight:500;margin-top:35rpx;margin-left:41rpx;}.dialog-num{width:30rpx;height:30rpx;background-color:#4074DD;border-radius:40rpx;display:flex;flex-direction:row;position:relative;bottom:60rpx;left:80rpx;}.dialog-num.nums{font-size:24rpx;color:#fff;margin-left:8rpx;margin-bottom:6rpx;}/我关注的/.follow-type{display:flex;flex-direction:row;}.follow-icon{margin-left:20rpx;margin-top:20rpx;}.follow-iconimage{width:80rpx;height:80rpx;}.follow-name{font-size:36rpx;font-weight:500;margin-top:35rpx;margin-left:36rpx;}.follow-num{width:30rpx;height:30rpx;background-color:#4074DD;border-radius:40rpx;display:flex;flex-direction:row;position:relative;bottom:60rpx;left:150rpx;}.follow-num.nums{font-size:24rpx;color:#fff;margin-left:8rpx;margin-bottom:6rpx;}/未读消息框/.unread{margin-top:16rpx;font-size:26rpx;color:#aeaeae;text-align:center;}其中部分bindtap有跳转函数，较为简单，此处就不一一列出，我们使用的是自定义头部标题，所以在使用前，须将app.js中的"navigationStyle"设置为"custom",
