hlm_pl_mall_h5/pages/home/article/Articlelist.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
        <view class="div common-header-wrap">
          <view class="status-holder"></view>
          <view :style="'height:'+navHeight+'px'"></view>
          <view class="common-header-holder"></view>
          <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar :title="article_type_name" class="common-header" left-icon="back" @clickLeft="goBack()">    
            </uni-nav-bar> 
          </view>
        </view>
		<view class="scroll-view div" style="position:relative">
        <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div flex-wrapper" @scrolltolower="loadMore" scroll-y="true">
            <view v-for='item in articleList' v-bind:key='item.article_id' @click="goArticleDetail(item)" class="div article-class">
                <flex-line :is-link="true" :show-border="true"><text class="span">{{item.article_title}}</text></flex-line>
            </view>
            <empty-record v-if='articleList.length <= 0 && !isMore'></empty-record>
        </scroll-view>
		</view>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import EmptyRecord from '../../EmptyRecord'
import { getArticleList } from '../../../api/homeArticle'
import flexLine from '../../flexLine'
export default {
  name: 'ArticleList',
  components:{
      TitleHeader,
      HomeBase,
      flexLine,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      article_type_name: '',
      ac_id: '', // 文章分类ID
      articleList: [],
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  onLoad: function (option) {
    this.ac_id=option.ac_id ? option.ac_id : ''
    this.loadMore()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      if(this.loading){
        return
      }
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {

        this.getArticleList(true)
      }
    },
    getArticleList () {
      uni.showLoading({ title: '加载中' })
      getArticleList(this.params, this.ac_id).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        if (this.articleList) {
          this.articleList = this.articleList.concat(res.result.article_list)
        } else {
          this.articleList = res.result.article_list
        }
        this.article_type_name = res.result.article_type_name
        this.loading = false
      }).catch(error=> {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    goArticleDetail (item) {
      uni.navigateTo({ url: '/pages/home/article/Articledetail'+'?'+urlencode( { 'article_id': item.article_id } )})
    }
  }
}
</script>

<style scoped lang="scss">
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.article-class{padding:0 $pageSpace;background: #fff}
</style>