更新记录

1.2(2020-03-15)

  • 新增回到顶部功能

1.1(2020-03-15)

  • update

1.0(2020-03-10)

  • create

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

nvue编译模式:uni-app

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

QQ交流群: 750104037 点我加入

快速导航

示例项目目录结构

|-- 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

方法名 说明 参数
setTabs 设置tabs数据 详见tabs属性详解

Slots

slot name 说明
backToTopSlot 回到顶部插槽, 在backToTopIsSlot为true时生效

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内部实现分页加载数据

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问