微信小程序实战——消息通知界面

先给大家上一个实战的效果图

 

这个是我们小组在开发的一个消息界面，用于实现简单的交流通信功能，只实现了简单的前端框架，下面献上代码供大家参考学习，若有不足，请多多指教。

wxml部分

  消息中心
  

  
    
    私信
    
    
      3
    
    
    
    通知
    
    
      21
    
    
  
  
  





  
  
  
  
    
      
      
        测试1
      
      
        
      
      
      
        9:36
      
    
    
      
      你想要怎么拍呢？
      
      
        
          2
        
      
    
  
  


  
  
  
  
    
    
      
        测试2
      
      
        
      
    
      
        8:16
      
    
    
      
      约拍时间是这周六下午的两点钟
      
      
        
          1
        
      
    
  
  





  
  
    
      
    
    
      系统通知
      
        11
      
    
    
      
    
  
  
  
  
    
      
    
    
      点赞
      
        6
      
    
    
      
    
  
  
  
    
    
      
    
    
      评论
      
        2
      
    
    
      
    
  
  

  
    
      
    
    
      我关注的
      
        1
      
    
    
      
    
  
  


  您有21条未读通知

 


 

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",