先给大家上一个实战的效果图
这个是我们小组在开发的一个消息界面，用于实现简单的交流通信功能，只实现了简单的前端框架，下面献上代码供大家参考学习，若有不足，请多多指教。
wxml部分
<!--头部消息中心--> <view class='title' style='height:{{navH}}px' catchtouchmove='true'> <view class='title-text'>消息中心</view> <!-- 私信、通知切换栏 --> <view class="selectTab" style='margin-top:{{navH}}px' catchtouchmove='true'> <view class="flex-row"> <view class="message {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"> 私信 <!--气泡提示--> <view class='bubble'> <view class='num'>3</view> </view> </view> <view class="notify {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab"> 通知 <!--气泡提示--> <view class='bubble2'> <view class='num'>21</view> </view> </view> </view> <view class='onTabLine' style="margin-left:{{175+currentTab*273}}rpx" catchtouchmove="ture"></view> <view class='line'></view> </view> </view> <!--私信消息列表--> <scroll-view scroll-y="true" class="message-list" style="margin-top:{{navH+47}}px;height:1200rpx" wx:if="{{currentTab==0}}" > <!--示例用户1--> <view class='user' bindtap='goTocontactPage'> <image class='header-icon' src='/images/icon1.jpeg'></image> <view class='user-content'> <view class='firstline'> <view class='apart'> <view class='username'> <text>测试1</text> </view> <view class='cooperation'> <image src='./images/6.png'></image> </view> </view> <view class='time'> <view class='time-num'>9:36</view> </view> </view> <view class='secondline'> <view class='dialog'> <text>你想要怎么拍呢？</text> </view> <view class='dialog-nums'> <view class='bubble3'> <view class='num'>2</view> </view> </view> </view> </view> </view> <!--分割线--> <view class='linecut'></view> <!--示例用户2--> <view class='user' bindtap='goTocontactPage'> <image class='header-icon' src='https://b267.photo.store.qq.com/psb?/V13v0ZyH3zvYu7/9Ne*obpt0tAkfi3fZZij7.1VF4qT363gGq021zfYWQ0!/b/dAsBAAAAAAAA&bo=bgFuAQAAAAAFByQ!&rf=viewer_4'></image> <view class='user-content'> <view class='firstline'> <view class='apart'> <view class='username'> <text>测试2</text> </view> <view class='cooperation'> <!-- <image src='./images/6.png'></image> --> </view> </view> <view class='time'> <view class='time-num'>8:16</view> </view> </view> <view class='secondline'> <view class='dialog'> <text>约拍时间是这周六下午的两点钟</text> </view> <view class='dialog-nums'> <view class='bubble3'> <view class='num'>1</view> </view> </view> </view> </view> </view> <!--分割线--> <view class='linecut'></view> </scroll-view> <!--关注消息列表框--> <scroll-view scroll-y class="notify-list" style="margin-top:{{navH+47}}px;height:1800rpx;" wx:if="{{currentTab==1}}"> <!--系统通知--> <view class='notify-type' bindtap='goToSystemPage'> <view class='notify-icon'> <image src='./images/tongzhi.png'></image> </view> <view class='notify-name'> 系统通知 <view class='notify-num'> <view class='nums'>11</view> </view> </view> <view class='right'> <!-- <image src=''></image> --> </view> </view> <view class='liner'></view> <!--点赞--> <view class='thumbs-up-type' bindtap='goToDianzanPage'> <view class='notify-icon'> <image src='./images/dianzan.png'></image> </view> <view class='thumbs-up-name'> 点赞 <view class='thumbs-up-num'> <view class='nums'>6</view> </view> </view> <view class='right'> <!-- <image src=''></image> --> </view> </view> <view class='liner'></view> <!--评论--> <view class='dialog-type' bindtap='goToCommentPage'> <view class='dialog-icon'> <image src='./images/dialog.png'></image> </view> <view class='dialog-name'> 评论 <view class='dialog-num'> <view class='nums'>2</view> </view> </view> <view class='right'> <!-- <image src=''></image> --> </view> </view> <view class='liner'></view> <!--我关注的--> <view class='follow-type' bindtap='goToConcernPage'> <view class='follow-icon'> <image src='./images/guanzhu.png'></image> </view> <view class='follow-name'> 我关注的 <view class='follow-num'> <view class='nums'>1</view> </view> </view> <view class='right'> <!-- <image src=''></image> --> </view> </view> <view class='liner'></view> <!--底部消息提示框--> <view class="unread"> <text>您有21条未读通知</text> </view> </scroll-view> <!--底部导航--> <tabbar tabbar="{{tabbar}}"></tabbar>wxss部分
/*头部标题*/ .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: 0rpx auto 0 auto; } .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; } .cooperation image{ 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-icon image{ 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-icon image{ 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-icon image{ 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-icon image{ 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",
