add 瀑布流

package.json

@@ -11,9 +11,11 @@
     "axios": "^0.19.0",
     "core-js": "^3.3.2",
     "html2canvas": "^1.0.0-rc.5",
+    "node-sass": "^4.13.0",
     "qs": "^6.9.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vue-waterfall2": "^1.9.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/main.js

@@ -3,7 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './styles/index.scss'; // global css
-import request from './utils/request'
+
+import waterfall from 'vue-waterfall2'
+Vue.use(waterfall)
 
 import setWechatTitle from './utils/setWechatTitle'
 

src/views/posterHistory.vue

 <template>
-  <div id="posterHistory">
-    <ul id="posterHistoryList" v-if="list.length>0">
-      <li v-for="(item,index) in list" :class="index.toString().substr(index.toString().length-1,1)==0 || index.toString().substr(index.toString().length-1,1)==1 || index.toString().substr(index.toString().length-1,1)==5 || index.toString().substr(index.toString().length-1,1)==6 ?'single':'double'" :key="index">
-        <img :src="item.imgUrl">
-      </li>
-    </ul>
+<div class="container-water-fall">
+  <waterfall v-if="list.length>0" :col='2' :isTransition="false"  :data="list"  @loadmore="loadmore">
+    <img v-for="item in list" :src="item.imgUrl">
+  </waterfall>
   <p class="noDataText" v-else>暂无数据</p>
-    <infinite-scroll :scroller="scroller" :loading="loading" :isLoaded="isLoaded" :loadingText="loadingText" @load="loadMore"/>
   <loading :loadingShow="loadingShow"></loading>
-  </div>
+</div>
 </template>
 <script>
 import request from '../utils/request'
 import loading from '../components/loading/loading.vue'
-import infiniteScroll from '../components/infiniteScroll/infiniteScroll.vue'
 export default {
   data() {
     return{
       loadingShow: false,//加载
       pageNum: 1,
       list: [],
-
-      loading: false,
-      scroller: null,
-      isLoaded: false,
-      loadingText: '正在加载中...'
     }
   },
   components: {
-    loading,infiniteScroll
+    loading,
   },
   mounted() {
-    this.scroller = this.$el
     this.loadingShow = true
     request({
       url: '/api/MarketingToolApi/Posters/userPosters',
@@ -46,66 +36,35 @@ export default {
       this.list = response.data.list
     })
   },
+  computed:{
+  },
   methods: {
-    loadMore () {
-      let me = this;
-      me.loading = true;
-      me.loadingText = '正在加载中...'
-      me.pageNum += 1;
+    loadmore(){
+      this.pageNum+=1
       request({
         url: '/api/MarketingToolApi/Posters/userPosters',
         method: 'post',
         data: {
           token: localStorage.getItem("token"),
-          page: me.pageNum,
+          page: this.pageNum,
           limit: 20
         }
       }).then(response => {
-        console.log(me.pageNum)
-          if (response.data.list == ''){
-            me.loadingText = '没有更多数据了'
-            setTimeout(function () {
-              me.isLoaded = true
-              me.loading = false
-            },1000)
-            setTimeout(function () {
-              me.isLoaded = false
-            },1500)
-          } else {
-            this.list.push(response.data.list)
-            me.loading = false
-          }
+        this.list = this.list.concat(response.data.list)
       })
-    }
+    },
   }
 }
 </script>
 <style lang="scss">
-#posterHistory{
-  // width: 100%;
-  // height: 100%;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-#posterHistoryList{
-  display: flex;
-  flex-wrap: wrap;
-  padding: 8px;
-  li{
-    flex: 1;
-    padding: 2px;
+.container-water-fall{
+  width: 100vw;
+  box-sizing: border-box;
+  padding: 5px 0 0 5px;
   img{
     width: 100%;
-      height: 100%;
-    }
-  }
-  .single{
-    min-width: 50%;
-    height: 217px;
-  }
-  .double{
-    min-width: 33.33%;
-    height: 142px;
+    height: 250px;
+    padding-right: 5px;
   }
 }
 </style>
\ No newline at end of file

src/views/tool.vue

@@ -290,6 +290,7 @@ export default {
           backgroundColor:null,
         }).then(canvas => {
           this.posterUrl = canvas.toDataURL('image/png')
+          document.body.scrollTop == 0
           this.showPoster = true
           this.createDialogShow = true
         })