ijijin-view(Vue)

导航组件

涉及到切换展示的相关组件，本UI库采用了以下三个组件（Tab栏、轮播图、滚动通知）。

Tab栏

1.调用方式

    import TabHead from 'ijijin-view/vue/TabHead'
    import TabBody from 'ijijin-view/vue/TabBody'
    import TabBodyItem from 'ijijin-view/vue/TabBodyItem'

如

<template>
    <section>
        <tab-head v-model="index" :tabs="tabs"></tab-head>
        <tab-body v-model="index">
            <tab-body-item v-for="(item,index) in tabs" :key="index">
                <p class="f-tc u-pt100 u-pb100">{{item}}</p>
            </tab-body-item>
        </tab-body>
    </section>
</template>

<script>
    import TabHead from 'ijijin-view/vue/TabHead'
    import TabBody from 'ijijin-view/vue/TabBody'
    import TabBodyItem from 'ijijin-view/vue//TabBodyItem'
    export default {
        data(){
            return{
                tabs:['tab1','tab2','tab3'],
                index:0
            }
        },
        components:{
            TabHead,
            TabBody,
            TabBodyItem
        }
    }
</script>

2.API

TabHead

参数 类型 默认值 说明 格式（例）
value Number 必填 当前活动Tab项索引
tabs Array 必传 Tab栏头部显示内容 ['tab1','tab2','tab3']

TabBody

参数 类型 默认值 说明
value Number 必填 当前活动Tab项索引
lazy Boolean true 初始化是否懒加载非当前活动Tab项
safeDistance Number 60（px） 滑动安全距离，滑动小于此距离不切换
duration Number 500（ms） 切换时过度动画时间

TabBodyItem

参数 类型 默认值 说明
canMove Boolean true 当Tab项是否可以滑动切换

轮播图

1.调用方式

    import Slider from 'ijijin-view/vue/Slider'
    import SliderItem from 'ijijin-view/vue/SliderItem'

如

<template>
    <section>
        <slider orientation="X">
            <slider-item>
                <p class="u-p100 f-tc">slider 1</p>
                <!--内容-->
            </slider-item>
            <slider-item>
                <p class="u-p100 f-tc">slider 2</p>
                <!--// 内容-->
            </slider-item>
            <slider-item>
                <p class="u-p100 f-tc">slider 3</p>
                <!--// 内容-->
            </slider-item>
        </slider>
    </section>
</template>
<script>
    import Slider from 'ijijin-view/vue/Slider'
    import SliderItem from 'ijijin-view/vue/SliderItem'
    export default {
        components: {
            Slider,
            SliderItem
        }
    }
</script>

2.API

Slider

参数 类型 默认值 说明
duration Number 500（ms） 过渡动画时间
time Number 2000（ms） 切换间隔时间
auto Boolean true 是否自动切换
orientation X、Y X 轮播方向
controlPosition bottom、left、outside、none bottom 控制按钮显示位置
controlClick Boolean true 控制按钮是否可以点击

滚动通知

1.调用方式

    import HorseRaceLamp from 'ijijin-view/vue/HorseRaceLamp'

如

	<template>
		<horse-race-lamp :list="list"></horse-race-lamp>
	</template>
	
	<script>
	import HorseRaceLamp from 'ijijin-view/vue/HorseRaceLamp'
	
    export default {
      data(){
        return{
            list: ['notice 1', 'notice 2', 'notice 3', 'notice 4', 'notice 5'],
        }
      },
      components:{
          HorseRaceLamp
      }
	}
	</script>

2.API

HorseRaceLamp

参数 类型 默认值 说明
list Array -- 滚动通知列表
time Number 5000（ms） 切换间隔时间
styles Object null 附加样式
height Number 0.67 高度
backgroundColor String '#fdefd3' 整体背景颜色

具体样例见右示例

← 表单组件 →