lks-school

自定义滚动触底工具-标签栏工具-新闻列表

Usage no npm install needed!

<script type="module">
  import lksSchool from 'https://cdn.skypack.dev/lks-school';
</script>

README

安装

npm install lks-school

自定义新闻列表-上拉刷新-平滑滚动标签和上面展开标签

全局引用--main.js里面使用

import newList from 'lks-school'

import sliderList from 'lks-school'

import smoothTabs from 'lks-school'

import flexTabs from 'lks-school'

import 'lks-school/lib/lksSchool.css';

Vue.use(newList)

Vue.use(sliderList)

Vue.use(smoothTabs)

Vue.use(flexTabs)

import { newList } from 'lks-school'

import { sliderList } from 'lks-school'

import { smoothTabs } from 'lks-school'

import { flexTabs } from 'lks-school'

import 'lks-school/lib/lksSchool.css';

components: {

newList,sliderList,smoothTabs,flexTabs

},

<newList :newsArr="newsArr" @newsMessageSkipFun="newsMessageSkipFun">

newsArr: [], //新闻列表数组

newsMessageSkipFun: //点击新闻列表的回调

<sliderList @sliderListBottom="sliderListBottom">

  • {{ index }}

  • 显示总共条数

    • sliderListBottom: //滚动到底部的回调

    可选参数 bottomDistance:70 //距离底部多少距离时，触发事件

    特别注意事项--父级元素必有固定高度--overflow: hidden;属性

    这是撑起-招生详情-距离

    这是撑起-优秀学员-距离

    这是撑起-校考课程-距离

    topHeight:0, //当前顶部占用的高度--针对浏览器没有导航栏的问题

    navTabsClass:'-fast-nav-tabs-demo', //导航标签统一class名

    tabsArr:[{title:'招生详情',slot:'major',},{title:'优秀学员',slot:'good',},{title:'校考课程',slot:'course',}]

    <flexTabs @tabsClickFun="tabsClickFun" :tabsArr="tabsFlexArr" :currentNavTabsNum="currentNavTabsNum">

    currentNavTabsNum:0,

    tabsFlexArr:[{'title':'全部'},{'title':'2020'},{'title':'2019'},{'title':'2018'}]

    tabsClickFun: //点击标签栏的回调