消息弹窗

src/components/Header/message.vue

+<template>
+  <div>
+    <!--滑动区域-->
+    <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
+      <!--筛选条件; 模拟列表的重置和演示空布局的使用-->
+      <div class="nav">
+        <p :class="getActiveCls(0)" @click="changeTab(0)">全部</p>
+        <p :class="getActiveCls(1)" @click="changeTab(1)">奶粉</p>
+        <p :class="getActiveCls(2)" @click="changeTab(2)">图书</p>
+      </div>
+      <!--展示上拉加载的数据列表-->
+      <ul id="dataList" class="data-list">
+        <li v-for="pd in dataList" :key="pd.id">
+          <p class="msg-title">{{pd.title}}</p>
+          <p class="msg-text">{{pd.content_text}}</p>
+          <p class="msg-time">{{pd.create_time}}</p>
+        </li>
+      </ul>
+    </mescroll-vue>
+  </div>
+</template>
+
+<script>
+  // 引入mescroll的vue组件
+  import MescrollVue from '@/lib/mescroll/mescroll.vue'
+
+  export default {
+    name: 'message',
+    components: {
+      MescrollVue
+    },
+    data () {
+      return {
+        mescroll: null, // mescroll实例对象
+        mescrollUp: {
+          callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
+          page: {
+            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+            size: 10 // 每页数据的数量
+          },
+          noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
+          toTop: {
+            src: './static/images/mescroll/mescroll-totop.png' // 回到顶部按钮的图片路径,支持网络图
+          },
+          empty: {
+            // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
+            warpId: 'dataList', // 父布局的id;
+            icon: './static/images/mescroll/mescroll-empty.png', // 图标,支持网络图
+            tip: '暂无相关数据~', // 提示
+            btntext: '去逛逛 >', // 按钮,默认""
+            btnClick () { // 点击按钮的回调,默认null
+              alert('点击了按钮,具体逻辑自行实现')
+            }
+          },
+          lazyLoad: {
+            use: true // 是否开启懒加载,默认false
+          }
+        },
+        dataList: [], // 列表数据
+        pdType: 0 // 菜单
+      }
+    },
+    beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
+      next(vm => {
+        vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
+      })
+    },
+    beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
+      this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
+      next()
+    },
+    methods: {
+      // mescroll组件初始化的回调,可获取到mescroll对象
+      mescrollInit (mescroll) {
+        this.mescroll = mescroll
+      },
+      // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
+      upCallback (page, mescroll) {
+        // 模拟联网
+        this.getListDataFromNet(page.num, page.size)
+      },
+
+      // 选中状态的样式
+      getActiveCls (type) {
+        return this.pdType === type ? 'active' : ''
+      },
+      // 切换菜单
+      changeTab (type) {
+        if (this.pdType !== type) {
+          this.pdType = type
+          this.dataList = []// 在这里手动置空列表,可显示加载中的请求进度
+          this.mescroll.resetUpScroll() // 刷新列表数据
+        }
+      },
+
+      /* 联网加载列表数据
+         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
+         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
+         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
+         * */
+      async getListDataFromNet (pageNum, pageSize) {
+        // 延时一秒,模拟联网
+        const res = await this.axios.get('http://rap2api.taobao.org/app/mock/115626/store/notice!getStoreNoticeListByPageAction.do',{
+          params:{
+            pageNo:pageNum,
+            pageSize,
+            push_state:2
+          }
+        })
+        if (res.data.code === 0) {
+          const resData = res.data.dataList
+          const length = this.dataList.length
+          if (length <= res.data.totalCount) {
+            this.dataList = this.dataList.concat(resData)
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scope>
+  /*以fixed的方式固定mescroll的高度*/
+  .mescroll {
+    position: fixed;
+    top: 44px;
+    bottom: 0;
+    height: auto;
+  }
+
+  .header {
+    z-index: 9990;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    background-color: white;
+  }
+
+  .header .btn-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 12px;
+    line-height: 22px;
+  }
+
+  .swiper {
+    width: 100%;
+    vertical-align: bottom;
+  }
+
+  .nav {
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .nav p {
+    display: inline-block;
+    width: 30%;
+    padding: 10px 0;
+  }
+
+  .nav .active {
+    border-bottom: 1px solid #FF6990;
+    color: #FF6990;
+  }
+
+  .data-list li {
+    position: relative;
+    padding: 10px 8px 10px 120px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .data-list .pd-img {
+    position: absolute;
+    left: 18px;
+    top: 18px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .data-list .pd-name {
+    font-size: 16px;
+    line-height: 20px;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .data-list .pd-price {
+    margin-top: 8px;
+    color: red;
+  }
+
+  .data-list .pd-sold {
+    font-size: 12px;
+    margin-top: 8px;
+    color: gray;
+  }
+</style>