更新记录

1.2（2020-03-15） 下载此版本

• 新增回到顶部功能

1.1（2020-03-15） 下载此版本

• update

1.0（2020-03-10） 下载此版本

• create

平台兼容性

nvue编译模式：uni-app

注意：目前不支持ios， 在下没有ios设备，如果你有并且愿意适配还请帮帮忙

QQ交流群: 750104037 点我加入

快速导航

• 示例项目目录结构

• Attributes

• Methods

• Slots

• tabs参数详解

• 组件运行原理

• 分页加载

示例项目目录结构

|-- QS-tabs-list-nvue
    |-- App.vue
    |-- main.js
    |-- manifest.json
    |-- pages.json
    |-- README.md
    |-- components
    |   |-- QS-tabs-list-nvue   //组件文件夹
    |       |-- QS-tabs-list-nvue.nvue  //核心文件
    |       |-- components  //子组件
    |       |   |-- contentComponents.nvue  //由type区分模板
    |       |   |-- components  //自定义模板, 由type区分
    |       |       |-- defComponent.nvue
    |       |-- js
    |           |-- config.js
    |           |-- pageDemand.js   //分页加载js
    |           |-- util.js
    |-- pages
    |   |-- backgroundImage
    |   |   |-- backgroundImage.nvue
    |   |-- default
    |   |   |-- default.nvue
    |   |-- index
    |   |   |-- index.nvue
    |   |-- randomColor
    |   |   |-- randomColor.nvue
    |   |-- setColor
    |       |-- setColor.nvue
    |   |-- customBackToTop
    |       |-- customBackToTop.nvue
    |-- static
    |   |-- logo.png
    |-- util
        |-- getTabList.js
        |-- request
            |-- app.js
            |-- interfaces.js
            |-- mock.js
            |-- QS-request.js

Attributes

props: {
    type: { //自定义逻辑判断标识
        type: String,
        default: ''
    },
    activeType: { //线条动画类型
        type: String,
        default: 'moveLine'
    },
    height: { //tabs+list组件的高度 单位固定像素px
        type: [String, Number],
        default: 500
    },
    minWidth: { //单个tab最小宽度
        type: String,
        default: '150rpx'
    },
    tabsHeight: { //tabs高度
        type: String,
        default: '44px'
    },
    lineWidth: { //tabsLine线条宽度
        type: [String, Number],
        default: uni.upx2px(50)
    },
    lineColor: { //线条颜色
        type: String,
        default: '#f1505c'
    },
    lineHeight: { //线条高度
        type: [String, Number],
        default: 3
    },
    lineBottom: { //线条距离底部距离
        type: [String, Number],
        default: 0
    },
    tabsFontSize: { //默认文字大小
        type: String,
        default: '30rpx'
    },
    tabsActiveFontSize: { //当前项文字大小
        type: String,
        default: '32rpx'
    },
    tabsBackgroundColor: { //tabs背景颜色
        type: String,
        default: '#fff'
    },
    swiperBackgroundColor: { //swiper背景颜色
        type: String,
        default: '#f8f8f8'
    },
    space: { //单个tab左右间距
        type: String,
        default: '10px'
    },
    defCurrent: { //默认初始项
        type: [String, Number],
        default: 0
    },
    activeColor: { //当前项主题颜色
        type: String,
        default: '#666'
    },
    defColor: { //非当前项主题颜色
        type: String,
        default: '#999'
    },
    lowerThreshold: { //默认初始项
        type: [String, Number],
        default: 0
    },
    getDataFnName: { //在子组件示例中获取数据的方法名称
        type: String,
        default: 'getData'
    },
    // 下拉刷新设置
    hasRefresh: { //是否开启下拉刷新, 目前只支持app-nvue
        type: [Boolean, String],
        default: true
    },
    refreshDistance: { //刷新距离
        type: [Number, String],
        default: 88
    },
    beforRefreshText: { //刷新前文字
        type: String,
        default: '下拉刷新'
    },
    releaseRefreshText: { //释放刷新文字
        type: String,
        default: '松开刷新'
    },
    isRefreshingText: { //刷新中文字
        type: String,
        default: '刷新中...'
    },
    successRefreshText: { //刷新成功文字
        type: String,
        default: '刷新成功'
    },
    failRefreshText: { //刷新失败文字
        type: String,
        default: '刷新失败'
    },
    refreshTextColor: { //刷新文字的颜色
        type: String,
        default: '#666'
    },
    refreshTextFontSize: { //刷新文字的大小
        type: String,
        default: '30rpx'
    },
    statusTextColor: { //列表状态提示文字颜色
        type: String,
        default: '#666'
    },
    //返回顶部设置
    backToTopDistance: { //显示返回顶部的距离
        type: [String, Number],
        default: 300
    },
    backToTop: {    //是否开启回到顶部功能
        type: [Boolean, String],
        default: true
    },
    backToTopIsSlot: {  //回到顶部按钮是否显示slot内容
        type: [Boolean, String],
        default: false
    },
    backToTopRight: {   //回到顶部按钮距离组件右边距离
        type: [String, Number],
        default: '30rpx'
    },
    backToTopBottom: {  //回到顶部按钮距离组件底部距离
        type: [String, Number],
        default: '70rpx'
    }
}

Methods

Slots

tabs参数详解

• 注: tabs由组件ref实例调用setTabs方法设置

  |tabs Array
  |----String
  |--------tab名称
  |----Object
  |--------name: tab名称
  |--------tabsBackgroundColor: 当前项tabs背景颜色
  |--------swiperBackgroundColor: 当前项swiper背景颜色
  |--------lineColor: 当前项线条颜色
  |--------statusTextColor: 列表状态说明文字颜色
  |--------refreshTextColor: 刷新文字颜色

组件运行原理

• 设置tabs数据(使用ref调用setTabs方法传入)

• 获取tabs高度, 计算swiper高度(height属性 - tabs高度)

• 计算各项tab布局信息(用于线条动画)

• 调用子组件方法初始化默认项数据(进入分页数据加载)

分页加载数据(子组件中)

• 引入doPageDemand.js与加载数据方法(示例为getTabList)

• call调用doPageDemand传入this实例

• doPageDemand.js内部实现分页加载数据