rxjs

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint --fix --ext .js,.vue src",
     "build:dev": "node build/build.js --env=dev",
     "build:uat": "node build/build.js --env=uat",
-    "build": "node build/build.js --env=prod"
+    "build": "node build/build.js --env=prod",
+    "flow": "flow"
   },
   "dependencies": {
     "animate.css": "^3.7.0",
@@ -60,6 +61,7 @@
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "flow-bin": "^0.86.0",
+    "flow-webpack-plugin": "^1.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "less": "^3.8.1",

src/components/Header/message.vue

@@ -4,12 +4,9 @@
       <div id="pullDown">
         <span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
       </div>
-      <ul id="thelist"
-        @keydown="handlerKeydown($event)"
-        @keypress="handlerKeypress($event)"
-      >
-        <li v-for="(item, index) in items" class="message-item"
-        :key="index" @click="openMessageContent(item,$event)">
+      <ul id="thelist">
+        <li v-for="(item, index) in items" :data-index="index" class="message-item"
+        :key="index">
           <div class="message-item-title">{{item.title}}</div>
           <div class="message-desc">{{item.content_text}}</div>
           <div class="message-desc">{{item.push_time | fomatDate}}</div>
@@ -23,11 +20,15 @@
 </template>
 
 <script>
+import {Observable} from 'rxjs'
+import {throttleTime, switchMap, filter} from 'rxjs/operators'
+
 require('@/lib/iscroll/iscroll')
 const IScroll = window.iScroll
 let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
 export default {
   name: 'message',
+  subscriptions () {},
   data () {
     return {
       items: [],
@@ -47,9 +48,7 @@ export default {
   watch: {},
   computed: {},
   mounted () {
-    this.$nextTick(() => {
-      this.loaded()
-    })
+      this.bindMessageTapEvent()
   },
   methods: {
     async getListDataFromNet () {
@@ -78,7 +77,7 @@ export default {
           this.isLastPage = true
         }
       }
-      this.myScroll.refresh()
+      this.loaded()
     },
     loaded () {
       pullDownEl = document.getElementById('pullDown')
@@ -111,6 +110,7 @@ export default {
                 ? '没有更多数据'
                 : '释放加载'
             }
+
           })
         },
         onScrollMove: function () {
@@ -165,6 +165,40 @@ export default {
       this.eventMouseStarEl = event.target
       this.eventType = ''
     },
+    bindMessageTapEvent () {
+      const clickEl$ = Observable.create(observer => {
+        $('body').on('click','.message-item',(event) => {
+          // const item = $(event.currentTarget)
+          observer.next(event)
+        })
+      })
+      const mousemoveEl$ = Observable.create(observer => {
+        $('body').on('mousemove','.message-item',(event) => {
+          // const item = $(event.currentTarget)
+          observer.next(event)
+        })
+      })
+
+      const mouseupEl$ = Observable.create(observer => {
+        $('body').on('mouseup','.message-item',(event) => {
+          // const item = $(event.currentTarget)
+          observer.next(event)
+        })
+      })
+      mouseupEl$.pipe(
+        switchMap(ev => mousemoveEl$),
+        switchMap(ev => clickEl$),
+        throttleTime(300),
+        filter(ev => ev.type === 'click')
+      )
+      .subscribe(event => {
+        const index = $(event.currentTarget).data('index')
+        const item = this.items[index]
+        this.openMessageContent(item)
+      },(ev) => {
+        console.log(ev)
+      })
+    },
     handlerKeypress(event) {
       this.eventMouseEndEl = event.target
       console.log(event)
@@ -187,17 +221,20 @@ export default {
     },
 
     openMessageContent (item) {
-      if (this.eventType === 'click') {
-        this.$alert(`${item.content}`, '', {
-          dangerouslyUseHTMLString: true,
-          customClass: 'message-panel'
-        })
-      }
-
-      // this.$alert(`${item.content}`, '', {
-      //   dangerouslyUseHTMLString: true,
-      //   customClass: 'message-panel'
-      // })
+      this.$alert(`${item.content}`, '', {
+        dangerouslyUseHTMLString: true,
+        customClass: 'message-panel',
+        callback:(action) => {
+          if (action === 'cancel') {
+            this.axios.post('http://testcenter.bigaka.net/b/store/notice!addNoticeUserRelationAction.do', {
+              params:{
+                "userId":"3956",
+                "noticeId":"68"
+              }
+            })
+          }
+        }
+      })
     }
   }
 }