HorOwnerTheme 横版赛事列表

引入

import PressHorOwnerTheme from '@tencent/press-plus/press-hor-owner-theme/press-hor-owner-theme';

export default {
  components: {
    PressHorOwnerTheme,
  }
}

代码演示

基础用法

<PressHorOwnerTheme
  title="奥巴马举办的比赛"
  :recommend-map="recommendMap"
  finished-text="没有更多了"
  @back="back"
  @clickMatch="clickMatch"
  @clickMatchButton="clickMatchButton"
  @update:loading="updateLoading"
  @loadMore="loadMore"
/>

export default {
  data() {
    return {
      recommendMap: {
        list: RECOMMEND_LIST,
        finished: false,
        loading: false,
        total: 999,
      },
    };
  },
  methods: {
    loadMoreRecommend() {
      const { recommendMap } = this;
      setTimeout(() => {
        recommendMap.list = recommendMap.list.concat(RECOMMEND_LIST);
        recommendMap.loading = false;
        recommendMap.finished =  recommendMap.list.length >= 30;
      }, 1000);
    },
    loadMore(sidebarIndex, tabIndex) {
      console.log('[loadMore]', sidebarIndex, tabIndex);
      this.loadMoreRecommend();
    },
    updateLoading(key, value) {
      this[key].loading = value;
    },
    back() {
      routerBack.call(this);
    },
    clickMatchButton(...args) {
      this.onGTip('[clickMatchButton]');
      console.log('[clickMatchButton]', args);
    },
    clickMatch(...args) {
      this.onGTip('[clickMatch]');
      console.log('[clickMatch]', args);
      this.recommendMap.list = [];
    },
  },
};

API

Props

参数	说明	类型	默认值
title	页面标题	string	``
recommend-map	推荐赛事信息	object	-
immediate-check	是否在初始化时立即执行滚动位置检查	boolean	false
finished-text	加载完成后的提示文案	string	没有更多了
finished-style	已完成自定义样式	string	-
loading-style	加载中自定义样式	string	-
loading-size	加载中图标尺寸	string	20px

Events

事件名	说明	回调参数
back	点击左上角返回图标	-
clickMatch	点击比赛	matchItem, matchIndex, sidebarIndex, tabIndex
clickMatchButton	点击比赛按钮，比如“详情”	matchItem, matchIndex, sidebarIndex, tabIndex
update:loading	更新 loading	key, value
loadMore	加载更多	sidebarIndex, tabIndex

Slot

名称	说明
empty	空状态

类型说明

// recommendMap
type IRecommendMap = {
  finished: boolean;
  loading: boolean;
  total: number;
  list: Array<{
    pic: string;
    name: string;
    joinEnd: string; // 报名结束时间
    distance: string; // 可为距离或省市
    tagList: Array<string>;
    awardList: Array<{
      type: string;
      name: string;
      img: string;
    }>;

    customTitle: number; // xx位好友已加入
    friends: Array<string>;
  }>
}