Fast-UI

# mixins 混入

# 公共混入

# handleJump 路由跳转

<script>
Vue.mixin({
  methods: {
    // 页面跳转
    handleJump(e){
      console.log(e)
      let target = e.currentTarget || e.target,
        url = target.dataset.url || 'back',
        type = target.dataset.type;
      if (url == '' || url == '#') return;
      switch (type) {
        case 'SWITCH':
          router.switchTab(url);
          break;
        case 'REDIRECT':
          router.redirectTo(url);
          break;
        case 'RELAUNCH':
          router.reLaunch({ url });
          break;
        case 'BACK':
          router.navigateBack();
          break;
        default:
          router.navigateTo(url);
          break;
      }
    }
  }
})
</script>

// 用法如下
// 跳转方式可选值 REDIRECT, BACK, SWITCH, RELAUNCH
<view @tap="handleJump" data-url="要跳转的路径" :data-type="跳转方式"></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# paging-list 分页

分页列表加载，于后台约定好返回的数据格式，一个项目中按照约定只能有一种分页格式，前端渲染统一使用paging-list，便于开发及后期维护

# 用法如下

  1. 普通分页
<script>
  // 第一步，引入 paging-list.js
  import pagingList from '@/common/minix/paging-list.js'

  export default {
    // 第二步 混入pagingList
    mixins: [pagingList],

    data() {
      return {
        // 第三步 配置分页接口地址
        minixPagingListsApi: global.apiUrls.getWorkRemark
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. 若分页中需要传入额外数据，比如文章详情页底部的评论列表，请求时需要传入文章对应ID
<template>
  <!-- 数据 -->
  <view v-for="(item，index) in listData" :key="index">
    
  </view>
  <!-- 与内置组件fu-empty组件配合使用 -->
  <fu-empty
    :pagingListLoadedAll="pagingListLoadedAll"
    :pagingListNoListData="pagingListNoListData"
    :listDataLength="listDataLength"
  ></fu-empty>
</template>

<script>
  // 第一步，引入 paging-list.js
  import pagingList from '@/common/minix/paging-list.js'

  export default {
    // 第二步 混入pagingList
    mixins: [pagingList],

    data() {
      return {
        // 第三步 配置分页接口地址，配置页面加载时默认不执行列表数据请求
        minixPagingListsApi: global.apiUrls.getWorkRemark,
        allowOnloadGetList: false
      }
    },

    onLoad(options){
      // 第四步 接受传入的文章ID 配置允许请求并主动发起第一页请求
      this.articleID = options.id
      this.allowOnloadGetList = true
      this.pagingListGetLists()
    },

    methods: {
      // 第五步 使用pagingListPostData方法为请求分页接口时加入额外参数
      pagingListPostData(){
        return {
          articleID: this.articleID
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  1. 带分类切换的分页
<template>
  <!-- 分类切换 -->
  <view>
    <view v-for="(item,index) in tabs" @click="switchTab(id)">{{iten.name}}</view>
  </view>    
  <!-- 数据 -->
  <view v-for="(item，index) in listData" :key="index">
    
  </view>
  <!-- 与内置组件fu-empty组件配合使用 -->
  <fu-empty
    :pagingListLoadedAll="pagingListLoadedAll"
    :pagingListNoListData="pagingListNoListData"
    :listDataLength="listDataLength"
  ></fu-empty>
</template>
<script>
  export default {
    data() {
      return {
        articleID:0,
        tabs:[{name:'推荐'，id:0},{name:'分类一',id:1},{name:'分类二',id:2}]
      }
    },
    methods: {
      switchTab(id){
        this.articleID = id;
        //使用pagingListToggle重新请求数据
        this.this.pagingListToggle();
      },
      // 使用pagingListPostData方法为请求分页接口时加入额外参数
      pagingListPostData(){
        return {
          articleID: this.articleID
        }
      }
    }
  }
  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  1. 其他
    • 如果存在分类切换时需要使用方法pagingListToggle与pagingListPostData配合使用
    • 如果分页返回数据中除了列表数据还返回有其他额外信息需要获取时请合理运用 pagingListBeforeResponseData 钩子函数
    • 建议与内置组件fu-empty组件配合使用

# 参数及方法配置详解

  • 参数
参数名 说明 类型 默认值 可选值
allowOnloadGetList 是否允许页面onload生命周期进入后立马执行pagingListGetLists（获取列表数据） Boolean true false
minixPagingListsApi 获取列表接口地址 String '' -
pageingListApiMethod 接口请求方法 String get post
pagingListPage 分页页码 Number 1 -
pagingListAllowLoadMore 允许加载更多 - 不建议修改
pagingListLoadedAll 已加载全部数据 - 不建议修改
pagingListNoListData 没有列表数据 - 不建议修改
listData 存储要渲染的数据 - 不建议修改
  • 方法
方法名 说明
pagingListToggle 清空之前的数据重新开始分页数据请求，多用于带分类的列表
pagingListGetLists 请求列表数据
pagingListPostData 向请求分页数据是添加除了（page, page_size）之外额外的参数
pagingListBeforeResponseData 列表数据请求回来之后未处理时的钩子函数

Filters 过滤器