悬浮工具栏 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

上次更新: