devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：代码探险家 | 2024-07-19 04:33:35

赞

踩

微信小程序消息界面

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

 

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

wxml部分

  1. <!--头部消息中心-->
  2. <view class='title' style='height:{{navH}}px'  catchtouchmove='true'>
  3.   <view class='title-text'>消息中心</view>
  4.   <!-- 私信、通知切换栏 -->
  5. <view class="selectTab" style='margin-top:{{navH}}px' catchtouchmove='true'>
  6.   <view class="flex-row">
  7.     <view class="message {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">
  8.     私信
  9.     <!--气泡提示-->
  10.     <view class='bubble'>
  11.       <view class='num'>3</view>
  12.     </view>
  13.     </view>
  14.     <view class="notify {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">
  15.     通知
  16.     <!--气泡提示-->
  17.     <view class='bubble2'>
  18.       <view class='num'>21</view>
  19.     </view>
  20.     </view>
  21.   </view>
  22.   <view class='onTabLine' style="margin-left:{{175+currentTab*273}}rpx" catchtouchmove="ture"></view>
  23.   <view class='line'></view>
  24. </view>
  25. </view>
  26.  
  27. <!--私信消息列表-->
  28. <scroll-view scroll-y="true" class="message-list" style="margin-top:{{navH+47}}px;height:1200rpx"  wx:if="{{currentTab==0}}" >
  29.   <!--示例用户1-->
  30.   <view class='user' bindtap='goTocontactPage'>
  31.   <image class='header-icon' src='/images/icon1.jpeg'></image>
  32.   <view class='user-content'>
  33.     <view class='firstline'>
  34.       <view class='apart'>
  35.       <view class='username'>
  36.         <text>测试1</text>
  37.       </view>
  38.       <view class='cooperation'>
  39.         <image src='./images/6.png'></image>
  40.       </view>
  41.       </view>
  42.       <view class='time'>
  43.         <view class='time-num'>9:36</view>
  44.       </view>
  45.     </view>
  46.     <view class='secondline'>
  47.       <view class='dialog'>
  48.       <text>你想要怎么拍呢？</text>
  49.       </view>
  50.       <view class='dialog-nums'>
  51.         <view class='bubble3'>
  52.           <view class='num'>2</view>
  53.         </view>
  54.       </view>
  55.     </view>
  56.   </view>
  57.   </view>
  58. <!--分割线-->
  59. <view class='linecut'></view>
  60.   <!--示例用户2-->
  61.   <view class='user' bindtap='goTocontactPage'>
  62.   <image class='header-icon' src='https://b267.photo.store.qq.com/psb?/V13v0ZyH3zvYu7/9Ne*obpt0tAkfi3fZZij7.1VF4qT363gGq021zfYWQ0!/b/dAsBAAAAAAAA&bo=bgFuAQAAAAAFByQ!&rf=viewer_4'></image>
  63.   <view class='user-content'>
  64.     <view class='firstline'>
  65.     <view class='apart'>
  66.       <view class='username'>
  67.         <text>测试2</text>
  68.       </view>
  69.       <view class='cooperation'>
  70.         <!-- <image src='./images/6.png'></image> -->
  71.       </view>
  72.     </view>
  73.       <view class='time'>
  74.         <view class='time-num'>8:16</view>
  75.       </view>
  76.     </view>
  77.     <view class='secondline'>
  78.       <view class='dialog'>
  79.       <text>约拍时间是这周六下午的两点钟</text>
  80.       </view>
  81.       <view class='dialog-nums'>
  82.         <view class='bubble3'>
  83.           <view class='num'>1</view>
  84.         </view>
  85.       </view>
  86.     </view>
  87.   </view>
  88.   </view>
  89. <!--分割线-->
  90. <view class='linecut'></view>
  91. </scroll-view>
  92. <!--关注消息列表框-->
  93. <scroll-view scroll-y class="notify-list" style="margin-top:{{navH+47}}px;height:1800rpx;"  wx:if="{{currentTab==1}}">
  94.   <!--系统通知-->
  95.   <view class='notify-type' bindtap='goToSystemPage'>
  96.     <view class='notify-icon'>
  97.       <image src='./images/tongzhi.png'></image>
  98.     </view>
  99.     <view class='notify-name'>
  100.       系统通知
  101.       <view class='notify-num'>
  102.         <view class='nums'>11</view>
  103.       </view>
  104.     </view>
  105.     <view class='right'>
  106.       <!-- <image src=''></image> -->
  107.     </view>
  108.   </view>
  109.   <view class='liner'></view>
  110.   <!--点赞-->
  111.   <view class='thumbs-up-type' bindtap='goToDianzanPage'>
  112.     <view class='notify-icon'>
  113.       <image src='./images/dianzan.png'></image>
  114.     </view>
  115.     <view class='thumbs-up-name'>
  116.       点赞
  117.       <view class='thumbs-up-num'>
  118.         <view class='nums'>6</view>
  119.       </view>
  120.     </view>
  121.     <view class='right'>
  122.       <!-- <image src=''></image> -->
  123.     </view>
  124.   </view>
  125.   <view class='liner'></view>
  126.   <!--评论-->
  127.     <view class='dialog-type' bindtap='goToCommentPage'>
  128.     <view class='dialog-icon'>
  129.       <image src='./images/dialog.png'></image>
  130.     </view>
  131.     <view class='dialog-name'>
  132.       评论
  133.       <view class='dialog-num'>
  134.         <view class='nums'>2</view>
  135.       </view>
  136.     </view>
  137.     <view class='right'>
  138.       <!-- <image src=''></image> -->
  139.     </view>
  140.   </view>
  141.   <view class='liner'></view>
  142. <!--我关注的-->
  143.   <view class='follow-type' bindtap='goToConcernPage'>
  144.     <view class='follow-icon'>
  145.       <image src='./images/guanzhu.png'></image>
  146.     </view>
  147.     <view class='follow-name'>
  148.       我关注的
  149.       <view class='follow-num'>
  150.         <view class='nums'>1</view>
  151.       </view>
  152.     </view>
  153.     <view class='right'>
  154.       <!-- <image src=''></image> -->
  155.     </view>
  156.   </view>
  157.   <view class='liner'></view>
  158. <!--底部消息提示框-->
  159. <view class="unread">
  160.   <text>您有21条未读通知</text>
  161. </view>
  162. </scroll-view> 
  163.  
  164. <!--底部导航-->
  165. <tabbar tabbar="{{tabbar}}"></tabbar>

wxss部分

  1. /*头部标题*/
  2. .title{
  3.   width: 100%;
  4.   /* overflow: hidden; */
  5.   position: fixed;
  6.   top: 0;
  7.   left: 0;
  8.   background: #fff;
  9.   z-index: 999;
  10. }
  11. .title-text{
  12.   width: 100%;
  13.   height: 45px;
  14.   line-height: 45px;
  15.   text-align: center;
  16.   position: absolute;
  17.   bottom: 0;
  18.   left: 0;
  19.  
  20.   font-size: 40rpx;
  21.   font-weight: 500;
  22. }
  23. /*私信、通知*/
  24. .flex-row{
  25.   flex-direction: row;
  26.   display: flex;
  27. }
  28. .onTabLine{
  29.   width: 120rpx;
  30.   height: 5rpx;
  31.   background-color:#4074DD;
  32.   margin-top:15rpx;
  33. }
  34. .line{
  35.   width: 750rpx;
  36.   height: 2rpx;
  37.   background-color: #F2F2F2;
  38.   margin: 0rpx auto 0 auto;
  39. }
  40. .message,.notify{
  41.   display: flex;
  42.   flex-direction: row;
  43.   font-size:36rpx;
  44.   margin-top: 20rpx;
  45.   width: 120rpx;
  46.   color:#CDCDCD;
  47.  
  48. }
  49. .message{
  50.   margin-left: 200rpx;
  51. }
  52. .notify{
  53.   margin-left: 150rpx;
  54. }
  55. .active{
  56.   color:#4074DD;
  57. }
  58. .selectTab{
  59.   position: fixed;
  60.   background-color: #fff;
  61.   z-index: 100;
  62. }
  63. /*气泡框样式*/
  64. .bubble{
  65.   background-color: #4074DD;
  66.   border-radius: 50rpx;
  67.   width: 30rpx;
  68.   height: 30rpx;
  69.   position: relative;
  70.   left: 10rpx;
  71.   bottom: 10rpx;
  72. }
  73. .bubble .num{
  74.   font-size: 24rpx;
  75.   color:#ffffff;
  76.   margin-left: 8rpx;
  77.   margin-top: -2rpx;
  78. }
  79. .bubble2{
  80.   background-color: #4074DD;
  81.   border-radius: 20rpx;
  82.   width: 40rpx;
  83.   height: 30rpx;
  84.   position: relative;
  85.   left: 10rpx;
  86.   bottom: 10rpx;
  87. }
  88. .bubble2 .num{
  89.   font-size: 24rpx;
  90.   color:#ffffff;
  91.   margin-left: 8rpx;
  92.   margin-top: -2rpx;
  93. }
  94. /*私信消息*/
  95. .message-list{
  96.   /* background-color:#f2f2f2; */
  97.   display: flex;
  98.   flex-direction: column;
  99. }
  100. .user{
  101.   display: flex;
  102.   flex-direction: row;
  103. }
  104. .user-content{
  105.   display: flex;
  106.   flex-direction: column;
  107. }
  108. .header-icon{
  109.   width: 104rpx;
  110.   height: 104rpx;
  111.   border-radius: 80rpx;
  112.   margin-left: 20rpx;
  113.   margin-top: 26rpx;
  114. }
  115. .firstline{
  116.   display: flex;
  117.   flex-direction: row;
  118. }
  119. .apart{
  120.   margin-left: 20rpx;
  121.   display: flex;
  122.   flex-direction: row;
  123.   width: 400rpx;
  124. }
  125. .username{
  126.   font-size: 36rpx;
  127.   margin-top: 26rpx;
  128.   font-weight: 400;
  129. }
  130. .cooperation{
  131.   width: 40rpx;
  132. }
  133. .cooperation image{
  134.   width: 40rpx;
  135.   height: 34rpx;
  136.   margin-top: 34rpx;
  137.   margin-left: 10rpx;
  138. }
  139. .time{
  140.  
  141.   display: flex;
  142.   width: 60rpx;
  143.   font-size: 24rpx;
  144.   margin-top: 36rpx;
  145.   color: #aeaeae;
  146.   margin-left: 140rpx;
  147. }
  148. .time-num{
  149.   /* margin-right: 200rpx; */
  150. }
  151. /*内容第二行*/
  152. .secondline{
  153.   display: flex;
  154.   flex-direction: row;
  155. }
  156. /*对话框消息内容*/
  157. .dialog{
  158.   width: 545rpx;
  159.   font-size: 28rpx;
  160.   color: #aeaeae;
  161.   margin-left: 20rpx;
  162.   margin-top: 15rpx;
  163. }
  164. /*对话框提示数目*/
  165. .dialog-nums{
  166.   /* width: 100rpx; */
  167. }
  168. /*气泡样式*/
  169. .bubble3{
  170.   background-color: #4074DD;
  171.   border-radius: 80rpx;
  172.   width: 40rpx;
  173.   height: 40rpx;
  174.   /* margin-left: 200rpx; */
  175.   margin-top: 20rpx;
  176. }
  177. .bubble3 .num{
  178.   font-size: 28rpx;
  179.   color: #ffffff;
  180.   font-weight: 500;
  181.   margin-left: 12rpx;
  182. }
  183. /*分割线*/
  184. .linecut{
  185.   width: 100%;
  186.   height: 2rpx;
  187.   background-color: #F2F2F2;
  188.   margin-top: 26rpx;
  189. }
  190.  
  191. /*通知界面*/
  192. /*系统通知*/
  193. .notify-type{
  194.   display: flex;
  195.   flex-direction: row;
  196. }
  197. .notify-icon{
  198.   margin-left: 20rpx;
  199.   margin-top: 20rpx;
  200. }
  201. .notify-icon image{
  202.   width: 80rpx;
  203.   height: 80rpx;
  204. }
  205. .notify-name{
  206.   font-size: 36rpx;
  207.   font-weight: 500;
  208.   margin-top: 35rpx;
  209.   margin-left: 36rpx;
  210. }
  211. .notify-num{
  212.   width: 40rpx;
  213.   height: 30rpx;
  214.   background-color: red;
  215.   border-radius: 40rpx;
  216.   display: flex;
  217.   flex-direction: row;
  218.   position: relative;
  219.   bottom: 60rpx;
  220.   left: 150rpx;
  221. }
  222. .notify-num .nums{
  223.   font-size: 24rpx;
  224.   color: #fff;
  225.   margin-left: 8rpx;
  226.   margin-bottom: 6rpx;
  227. }
  228. /*最帅的分割线*/
  229. .liner{
  230.   width: 100%;
  231.   height: 2rpx;
  232.   background-color: #F2F2F2;
  233.   margin-top: 20rpx;
  234. }
  235. /*点赞*/
  236. .thumbs-up-type{
  237.   display: flex;
  238.   flex-direction: row;
  239. }
  240. .thumbs-up-icon{
  241.   margin-left: 20rpx;
  242.   margin-top: 20rpx;
  243. }
  244. .thumbs-up-icon image{
  245.   width: 80rpx;
  246.   height: 80rpx;
  247. }
  248. .thumbs-up-name{
  249.   font-size: 36rpx;
  250.   font-weight: 500;
  251.   margin-top: 35rpx;
  252.   margin-left: 36rpx;
  253. }
  254. .thumbs-up-num{
  255.   width: 30rpx;
  256.   height: 30rpx;
  257.   background-color: #4074DD;
  258.   border-radius: 40rpx;
  259.   display: flex;
  260.   flex-direction: row;
  261.   position: relative;
  262.   bottom: 60rpx;
  263.   left: 80rpx;
  264. }
  265. .thumbs-up-num .nums{
  266.   font-size: 24rpx;
  267.   color: #fff;
  268.   margin-left: 8rpx;
  269.    margin-bottom: 6rpx;
  270. }
  271. /*评论*/
  272. .dialog-type{
  273.   display: flex;
  274.   flex-direction: row;
  275. }
  276. .dialog-icon{
  277.   margin-left: 30rpx;
  278.   margin-top: 35rpx;
  279. }
  280. .dialog-icon image{
  281.   width: 65rpx;
  282.   height: 65rpx;
  283. }
  284. .dialog-name{
  285.   font-size: 36rpx;
  286.   font-weight: 500;
  287.   margin-top: 35rpx;
  288.   margin-left: 41rpx;
  289. }
  290. .dialog-num{
  291.   width: 30rpx;
  292.   height: 30rpx;
  293.   background-color: #4074DD;
  294.   border-radius: 40rpx;
  295.   display: flex;
  296.   flex-direction: row;
  297.   position: relative;
  298.   bottom: 60rpx;
  299.   left: 80rpx;
  300. }
  301. .dialog-num .nums{
  302.   font-size: 24rpx;
  303.   color: #fff;
  304.   margin-left: 8rpx;
  305.    margin-bottom: 6rpx;
  306. }
  307. /*我关注的*/
  308. .follow-type{
  309.   display: flex;
  310.   flex-direction: row;
  311. }
  312. .follow-icon{
  313.   margin-left: 20rpx;
  314.   margin-top: 20rpx;
  315. }
  316. .follow-icon image{
  317.   width: 80rpx;
  318.   height: 80rpx;
  319. }
  320. .follow-name{
  321.   font-size: 36rpx;
  322.   font-weight: 500;
  323.   margin-top: 35rpx;
  324.   margin-left: 36rpx;
  325. }
  326. .follow-num{
  327.   width: 30rpx;
  328.   height: 30rpx;
  329.   background-color: #4074DD;
  330.   border-radius: 40rpx;
  331.   display: flex;
  332.   flex-direction: row;
  333.   position: relative;
  334.   bottom: 60rpx;
  335.   left: 150rpx;
  336. }
  337. .follow-num .nums{
  338.   font-size: 24rpx;
  339.   color: #fff;
  340.   margin-left: 8rpx;
  341.    margin-bottom: 6rpx;
  342. }
  343. /*未读消息框*/
  344. .unread{
  345.   margin-top: 16rpx;
  346.   font-size: 26rpx;
  347.   color: #aeaeae;
  348.   text-align: center;
  349. }

其中部分bindtap有跳转函数，较为简单，此处就不一一列出，我们使用的是自定义头部标题，所以在使用前，须将app.js中的"navigationStyle"设置为"custom",

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/849422
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号