veterans_H5/h5_web/pages/publicCourse/publicCourse.vue

<template>
  <view class="content">
    <view class="content-list">
      <view class="content-list-item" v-for="(item, index) in videoList" :key="index">
        <view class="content-list-item-image">
          <u-image class="image" width="100%" height="224rpx" :src="item.image" />
					<view class="play-btn">
						<u-image width="70rpx" height="70rpx" src="/static/img/play-video-icon.svg" />
					</view>
        </view>
        <view class="content-list-item-title">
          <text>{{ item.title }}</text>
        </view>
        <view class="content-list-item-subtitle">
          <text>{{ item.subtitle }}</text>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'loadmore',
      videoList: [
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' }
      ],
      page: {
        num: 1,
        size: 10,
        total: 0
      }
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: '颂军魂'
    });
  },
  onPullDownRefresh() {
    Object.assign(this, {
      status: 'loadmore',
      videoList: [
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' }
      ],
      page: {
        num: 1,
        size: 10,
        total: 0
      }
    });
    setTimeout(() => {
      this.handleVideoList();
      uni.stopPullDownRefresh(); //停止刷新
    }, 1000);
  },
  onReachBottom() {
    if (this.page.num >= this.page.total) return;
    this.status = 'loading';
    this.page.num = ++this.page.num;
    setTimeout(() => {
      this.handleVideoList();
    }, 1500);
  },
  methods: {
    handleVideoList() {
      this.videoList = this.videoList.concat([
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' },
        { image: '', title: '诞生', subtitle: '颂军魂' }
      ]);
      this.page.total = 100;
      if (this.page.num >= this.page.total) this.status = 'nomore';
      else this.status = 'loading';
    }
  }
};
</script>

<style lang="scss" scoped>
@import './publicCourse.scss';
</style>