添加loading动画

app.json

@@ -85,7 +85,8 @@
     "pages/creatorSelectPage/index",
     "components/chat/text",
     "components/chat/hello",
-    "components/chat/html"
+    "components/chat/html",
+    "components/chat/loading"
   ],
   "permission": {
     "scope.userLocation": {

components/chat/loading.js

@@ -0,0 +1,66 @@
+// components/chat/loading.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

components/chat/loading.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

components/chat/loading.wxml

@@ -0,0 +1,6 @@
+<!--components/chat/loading.wxml-->
+<view class="loader">
+  <view class="dot"></view>
+  <view class="dot"></view>
+  <view class="dot"></view>
+</view>

components/chat/loading.wxss

@@ -0,0 +1 @@
+/* components/chat/loading.wxss */

subPage/chat/index.js

@@ -17,6 +17,7 @@ Page({
         type:'text',
         isUp:false,
         isDown:false,
+        loading:false,
       },
     ],
     /* 录音状态
@@ -202,14 +203,16 @@ Page({
           type:'text',
           isUp:false,
           isDown:false,
-          content:that.data.sendText
+          content:that.data.sendText,
+          loading:false,
         },
         {
           id:that.data.list.length + 1,
           type:'html',
           isUp:false,
           isDown:false,
-          content:`【北京奔驰连接器日结工】<br /><br />🚻 男女 18-48， 18-48周岁， 男女不限， 要求26个英文字母， 纹身烟疤拍照确认， 黑户，明显纹身，临时身份证不予接收，两班倒，站班<br /><br />💰 员工250元/天，支付60天；60天以后员工220元/天；每月10号发薪。培训工资100元/天，员工 16 元/时以上部分含税6个点的，打卡不满七天无工资；60天以后员工缴纳社保`
+          content:`【北京奔驰连接器日结工】<br /><br />🚻 男女 18-48， 18-48周岁， 男女不限， 要求26个英文字母， 纹身烟疤拍照确认， 黑户，明显纹身，临时身份证不予接收，两班倒，站班<br /><br />💰 员工250元/天，支付60天；60天以后员工220元/天；每月10号发薪。培训工资100元/天，员工 16 元/时以上部分含税6个点的，打卡不满七天无工资；60天以后员工缴纳社保`,
+          loading:true,
         },
       ],
       sendText:''
@@ -254,14 +257,16 @@ Page({
             type:'text',
             isUp:false,
             isDown:false,
-            content:that.data.sendText
+            content:that.data.sendText,
+            loading:false,
           },
           {
             id:that.data.list.length + 1,
             type:'html',
             isUp:false,
             isDown:false,
-            content:`【北京奔驰连接器日结工】<br /><br />🚻 男女 18-48， 18-48周岁， 男女不限， 要求26个英文字母， 纹身烟疤拍照确认， 黑户，明显纹身，临时身份证不予接收，两班倒，站班<br /><br />💰 员工250元/天，支付60天；60天以后员工220元/天；每月10号发薪。培训工资100元/天，员工 16 元/时以上部分含税6个点的，打卡不满七天无工资；60天以后员工缴纳社保`
+            content:`【北京奔驰连接器日结工】<br /><br />🚻 男女 18-48， 18-48周岁， 男女不限， 要求26个英文字母， 纹身烟疤拍照确认， 黑户，明显纹身，临时身份证不予接收，两班倒，站班<br /><br />💰 员工250元/天，支付60天；60天以后员工220元/天；每月10号发薪。培训工资100元/天，员工 16 元/时以上部分含税6个点的，打卡不满七天无工资；60天以后员工缴纳社保`,
+            loading:true,
           },
         ],
         sendText:''

subPage/chat/index.json

@@ -2,6 +2,7 @@
   "usingComponents": {
     "hello-panel": "../../components/chat/hello",
     "text-panel": "../../components/chat/text",
-    "html-panel": "../../components/chat/html"
+    "html-panel": "../../components/chat/html",
+    "loading-panel": "../../components/chat/loading"
   }
 }

subPage/chat/index.wxml

@@ -19,10 +19,11 @@
                 <hello-panel />
               </view>
               <view wx:if="{{index % 2 == 0 && index != 0}}"
-                  class="bg-obj g_flex_row_start min80"
+                  class="{{!item.loading ? 'bg-obj' : ''}} g_flex_row_start min80"
               >
-                <text-panel message="{{item.content}}" color="cblack" wx:if="{{item.type == 'text'}}" />
-                <html-panel message="{{item.content}}" color="cblack" wx:if="{{item.type == 'html'}}" />
+                <text-panel message="{{item.content}}" color="cblack" wx:if="{{item.type == 'text' && !item.loading}}" />
+                <html-panel message="{{item.content}}" color="cblack" wx:if="{{item.type == 'html' && !item.loading}}" />
+                <loading-panel wx:if="{{item.loading}}" />
               </view>
               <view wx:if="{{index % 2 == 1}}"
                   class="main-obj g_flex_row_end max80"
@@ -30,7 +31,7 @@
                 <text-panel message="{{item.content}}" color="cwhite" />
               </view>
             </view>
-            <view class="item-opera g_flex_row_between" wx:if="{{index % 2 == 0}}">
+            <view class="item-opera g_flex_row_between" wx:if="{{index % 2 == 0 && !item.loading}}">
               <view class="g_flex_row_start">
                 <i class="iconfont icon-useful era-icon g_mr_12 {{item.isUp ? 'icon-active' : ''}}"
                   data-up="{{item.isUp}}"