剛開始進入公司，搞得是vue開發的微信公眾號，花了好幾天做了一個這個效果，自己都笑哭了。做了這麼長時間。

      <!-- <div class="dataSet" v-for="(item,index) in bulletinList" :key="item.index"> -->
      <div class="dataSet">
        <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
<v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
  <ul class="list" >
    <li v-for="(item,index) in pageList" :key="item.index" @click="gotoDetail(index)">
      
      <div class="dataList">
            <div class="dataImg"><img v-if="item.imgurl" :src="item.imgurl"/></div>
            <div class="dataTit">
              <div class="title"><p>{{item.title|filterFun}}</p></div>
              <div class="time">{{item.modifytime|formatDate}}</div>
            </div>
          </div>
    </li>
    <li v-if="allLoaded" class="tobottom">
        到底了( ఠൠఠ )
    </li>
  </ul>
</v-loadmore>
    </div>



      </div>
    </div>
</div>
 

export default { name: “announcement”, components: { TopHeader, ‘v-loadmore’:Loadmore // 為元件起別名，vue轉換template標籤時不會區分大小寫，例如：loadMore這種標籤轉換完就會變成loadmore，容易出現一些匹配問題 // 推薦應用元件時用a-b形式起名 }, data() { return { tit: “公告通知”, searchCondition:{ //分頁屬性 pageNo:1, pageSize:4 }, pageList:[], allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃載入資料了 scrollMode:“auto” ,//移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動 storageList:[] }; }, mounted(){ this.loadPageList(); //初次訪問查詢列表 }, methods: {

//跳轉頁面
 gotoDetail(index) {
   console.log(index)
  // sessionStorage.setItem("id", res.data.bulletinList);
  sessionStorage.setItem("annList", JSON.stringify(this.pageList[index]));

  this.$router.push({path:'/announcementdetails/announcementdetails'});
},

loadTop:function() { //元件提供的下拉觸發方法
    //下拉載入
    this.loadPageList();
    this.$refs.loadmore.onTopLoaded();// 固定方法，查詢完要呼叫一次，用於重新定位
  },
  loadBottom:function() {
    // 上拉載入
    this.more();// 上拉觸發的分頁查詢
    this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要呼叫一次，用於重新定位
  },
  loadPageList:function (){
    let userInfo = localStorage.getItem('userInfo');
    userInfo = JSON.parse(userInfo);


      // 查詢資料
    
    let data = {
        ck: userInfo.connkey,
        platform:this.$pub.platform,
        pageSize:this.searchCondition.pageSize,
        pageIndex:1
        // pageSize:4,
        // pageIndex:1
    };
    this.$server.BulletinList(data).then(res => {
        if (res.Code == 1 && res.WsCode == 1) {
            //this.HospitalData = this.HospitalData.concat(res.content.data);
            //this.pageList = this.pageList.concat(res.Data.bulletinList);

            this.isHaveMore(res.Data);
            this.pageList=res.Data.bulletinList;
            this.$nextTick(function()
            {
                this.scrollMode="touch";
            });


            this.allNum= this.pageList.length;
            if(this.allNum <  4 ){
                this.allLoaded = true
            }
            this.searchCondition.pageNo=1;
        }
    }).catch(
        err => {
            // console.log(err);
            this.$message.warning('查無資料!')
         }
    )
  },
  more:function (){

    let userInfo = localStorage.getItem('userInfo');
    userInfo = JSON.parse(userInfo);
      // 分頁查詢
    this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;

    let data = {
        ck: userInfo.connkey,
        platform:this.$pub.platform,
        pageSize:this.searchCondition.pageSize,
        pageIndex:this.searchCondition.pageNo
    };
    this.$server.BulletinList(data).then(res => {
        this.pageList=this.pageList.concat(res.Data.bulletinList);
        this.allNum= this.pageList.length;
        if(this.allNum <= this.searchCondition.pageNo * 4 ){
            this.allLoaded = true
        }

    }).catch(
        err => {
            
         }
    )
  },
  isHaveMore:function(isHaveMore){
    // 是否還有下一頁，如果沒有就禁止上拉重新整理
    this.allLoaded = true; //true是禁止上拉載入
    if(isHaveMore){
      this.allLoaded = false;
    }
  }
 

}, filters: { formatDate(time) { var date = new Date(time); return formatDate(date, ‘yyyy-MM-dd’); }, filterFun: function (value) {

        if(value&& value.length > 20) {

            value= value.substring(0,20)+ '...';
          }
         return value;

      }
}

};