使用

1. 安装

npm i fmy-ui

2. 在vue2.x工程项目的main.js导入并注册

// 全部导入
import fmyUi from 'fmy-ui'
import 'fmy-ui/style/index.css'
Vue.use(fmyUi)

// 按需导入
import {FLoadMore,FTab,...} from 'fmy-ui'
import 'fmy-ui/style/index.css'
Vue.use(FLoadMore)
Vue.use(FLoadMore)
...

3. 在页面/组件中直接以标签形式使用

// tab组件集
<template>
  <div>
    <FTabs :currentIndex="curIndex" @changeIndex="changeIndex">
      <f-tab label="首页" index="1">
        <div>内容1</div>
      </f-tab>
      <f-tab label="购物车" index="2">
        <div>内容2</div>
      </f-tab>
      <f-tab label="我的" index="3">
        <div>内容3</div>
      </f-tab>
    </FTabs>
  </div>
</template>

<script>
export default {
  name: 'FTabTest',
  data() {
    return {
      curIndex: "1"
    }
  },
  methods:{
    changeIndex(index) {
      this.curIndex = index
    }
  }
}
</script>
<style scoped>
</style>

文档

tab 组件集

FTabs Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | currentIndex | 当前选中的tab | string/number | - | "1" |

FTabs Events

| 事件名 | 说明 | 回调参数 | | :---------: | :----------: | :-----------------: | | changeIndex | 切换tb时触发 | value:string/number |

FTabs Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容为多个切换的FTab组件导航 |

FTab Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---: | :-----------: | :-----------: | :----: | :----: | | index | tab的唯一索引 | string/number | - | "" | | label | tab标签名 | string | | ”“ |

FTab Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容为每个FTab对应显示的content |

lazyloadmore 滚动懒加载组件

FLazyLoadMore Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | allList | 要渲染的整个列表数据 | array | - | [] | | size | 一屏要渲染的dom列表数 | number | - | 10 |

FLazyLoadMore Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容一般为一些列表展示的瀑布流组件 |

virtualscroll 虚拟滚动组件

FVirtualScroll Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | dataList | 请求回的整个列表数据 | array | - | [] | | viewH | 外部可视区容器高度 | number | - | 500 | | itemH | 滚动列表单项高度 | number | - | 60 |

FVirtualScroll Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容滚动列表的单项item组件，通过作用域插槽传itemDataObj为列表每一个的数据对象 |

scroloadmore 滚动加载组件(配合后端分页)

FScroLoadMore Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | partList | 当前已请求回来的列表 | array | - | [] | | size | 一屏要渲染的列表数 | number | - | 10 | | curPage | 当前请求的最新页码 | number | - | 1 | | total | 数据列表总数 | number | - | 0 |

FScroLoadMore Events

| 事件名 | 说明 | 回调参数 | | :---------: | :----------: | :-----------------: | | curPageChange | 滚动触底时触发 | curPage：要加载的下一页页码 |

FScroLoadMore Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容一般为一些列表展示的瀑布流组件，作用域插槽可获取列表数据partList在父组件中自定义渲染结构 |

pagination 分页加载组件(配合后端分页)

FPagination Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | curPage | 当前页的页码(可选) | number | - | 1 | | pageSize | 一页要请求的数据量，也是渲染的dom列表数 | number | - | 10 | | total | 总数据量 | number | - | 0 | | continues | 分页器的连续页码数量(一般传奇数，可选) | number | - | 5 |

FPagination Events

| 事件名 | 说明 | 回调参数 | | :---------: | :----------: | :-----------------: | | getCurPage | 点击分页器进行任意切换页码操作时触发 | curpagenum：点击切换的页码数 |

zoom 放大镜组件

FZoom Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | zoomImg | 放大镜显示的图片 | string | - | http://i1.sanwen.net/doc/1701/821-1F119101459.png |

tabbar组件集

FTabbar Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容为多个切换的FTabbarItem |

FTabbarItem Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---: | :-----------: | :-----------: | :----: | :----: | | path | 路由跳转路径 | string | - | 必传 | | activeColor | tabbarItem文字选中时的颜色 | string | - | "rgba(72, 104, 245, 0.702)" |

FTabbarItem Slots

| name | 说明 |
| :---------: | :----------: | | item-icon | tabbarItem默认图标 | | item-icon-active | tabbarItem激活选中时的图标 | | item-text | tabbarItem的文字 |

swiper轮播图/跑马灯 组件集

FSwiper Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----------: | :-----------: | :-----------: | :----: | :----: | | swiperH | 轮播图组件高度 | number | - | 160 | | showIndicator | 是否显示指示器 | boolean | true/false | true | | indiActiveColor | 指示器激活样式 | string | - | rgba(72, 104, 245, 0.702) | | showArrow | 是否显示方向键 | boolean | true/false | true | | interval | 自动轮播间隔时间 | number | - | 3000(ms) | | animDuration | 轮播切换过渡效果 | number | - | 300(ms) | | moveRatio | 手指滑动轮播图片超过swiper宽度的多少占比后，松手能放映下一张 | number | - | 1/4(0.25) |

FSwiper Events

| 事件名 | 说明 | 回调参数 | | :---------: | :----------: | :-----------------: | | transitionEnd | 轮播完成触发(包括自动&手动轮播) | index:number(表示当前轮播图索引) |

FSwiper Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容为轮播图轮播内容(即包含的FSwiperItem) |

FSwiperItem Slots

| name | 说明 |
| :---------: | :----------: | | default | 插槽内容为每一屏轮播的图片内容 |