ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 实验室

    • 说明
    • 悬浮工具栏 fixed-tools
    • 点标签 dot-tag
    • 布局 ui-row
    • 步进器 ui-stepper
    • 消息提示 ui-notify
    • 分割线 ui-divider
    • 搜索栏 ui-search-bar

悬浮工具栏 fixed-tools

引用组件,请参考说明文档,下面的引入只是作为演示,实际引入路径,请根据您的项目架构更改。

"usingComponents": {
    "fixed-tools" : "/packageB/components/fixed-tools/fixed-tools"
}

用法

<fixed-tools data="{{list}}" isIcon="{{isIcon}}" scrollTop="{{scrollTop}}" bind:tapBar="tapToolsBar"/>

数据格式

Page({
    data: {
        list: [{icon: '_icon-loading', num: 0},{icon: '_icon-search', num: 0}],
        isIcon: {down: 'cicon-unfold-less', top: 'cicon-eject', up: 'cicon-unfold-more'},
        scrollTop: 0,
    },
    onLoad() {
        
    },
    tapToolsBar(e) {
        console.log(e.detail)
    },
    // 监听用户滑动页面事件。
    onPageScroll(e) {
        // 注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。
        // 注意:请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据,会影响通信耗时。
        // https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object
        this.setData({
            scrollTop: e.scrollTop
        })
    }
})

参数

参数类型可选值默认值说明
uiString--其它class样式
dataArray--数据
scrollTopNumber/String-0当前滚动位置
topNumber/String-30距离顶部多少显示滚动到顶部的图标
showBoolean-true收起展开状态
isIconObject--图标配置
isSlotDownBoolean-false自定义收起图标的插槽
isSlotTopBoolean-false自定义到顶部图标的插槽
isSlotUpBoolean-false自定义展开图标的插槽
bind:tapShowEvent-event.detail = true/false显示/隐藏事件
bind:tapBarEvent-event.detail = {item, index}工具栏被点击事件
bind:tapScrollTopEvent--滚动到顶部事件

插槽

参数说明
iconDown收起图标,isSlotDown 开启时有效
iconTop滚动到顶部,isSlotTop 开启时有效
iconUp展开图标,isSlotUp 开启时有效

mp-cu

Prev
说明
Next
点标签 dot-tag