1. 文本切换收藏按钮：uni-fav（收藏/已收藏）

参考官网
属性

checked 是否为已收藏，默认值 false
star    按钮是否带星星，默认值 true
circle  是否为圆角，默认值 false
contentText 收藏按钮文字，默认值 {contentDefault: '收藏',contentFav: '已收藏'}
bgColor 未收藏时的背景色，默认值 #eeeeee
bgColorChecked  已收藏时的背景色，默认值 #007aff
fgColor     未收藏时的文字颜色，默认值 #666666
fgColorChecked      已收藏时的文字颜色，默认值 #FFFFFF

示例

<uni-fav 
:checked="checked" 
:star="false"
:circle="true"
:content-text="contentText"
bg-color="#dd524d"
bg-color-checked="#007aff"
fg-color="#ffffff" 
fg-color-checked="#ffffff"
class="favBtn" 
@click="favClick()" />

export default {
data() {
    return {
        checked: false,
        contentText: {
            contentDefault: '追番',
            contentFav: '已追番'
        }
    }
},
methods: {
    favClick() {
        this.checked = !this.checked
    }
}
}
<style lang="scss">
    .favBtn {
        margin: 0 20rpx 20rpx 0;
    }
</style>

2. 悬浮展开按钮：uni-fab

参考官网
属性

pattern 可选样式配置项，类型 Object   
    color   文字默认颜色，默认值 #3c3e49
    selectedColor   文字选中时的颜色，默认值 #007AFF    
    backgroundColor 背景色，默认值 #ffffff 
    buttonColor 按钮背景色，默认值 #3c3e49   
content 展开菜单内容配置项，类型 Array      
    iconPath        图片路径
    selectedIconPath    选中后图片路径
    text    文字
    active  是否选中当前
    
vertical 垂直对齐方式。bottom:下对齐，top：上对齐，默认值 bottom
direction 展开菜单显示方式。horizontal:水平显示，vertical：垂直显示，默认值 horizontal
popMenu 是否使用弹出菜单，默认值 true   

@trigger 展开菜单点击事件，返回点击信息
@fabClic 悬浮按钮点击事件

    

示例

<uni-fab 
ref="fab" 
:pattern="pattern" 
:content="content" 
:horizontal="horizontal" 
:vertical="vertical"
:direction="direction" 
@trigger="trigger" 
@fabClick="fabClick" />

export default {
    data() {
        return {
            horizontal: 'left',
            vertical: 'bottom',
            direction: 'horizontal',
            pattern: {
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#007AFF',
                buttonColor: '#007AFF',
                iconColor: '#fff'
            },
            content: [{
                    iconPath: '/static/image.png',
                    selectedIconPath: '/static/image-active.png',
                    text: '相册',
                    active: false
                },
                {
                    iconPath: '/static/home.png',
                    selectedIconPath: '/static/home-active.png',
                    text: '首页',
                    active: false
                },
                {
                    iconPath: '/static/star.png',
                    selectedIconPath: '/static/star-active.png',
                    text: '收藏',
                    active: false
                }
            ]
        }
    },
    onBackPress() {
        if (this.$refs.fab.isShow) {
            this.$refs.fab.close()
            return true
        }
        return false
    },
    methods: {
        trigger(e) {
            console.log(e)
            this.content[e.index].active = !e.item.active
            uni.showModal({
                title: '提示',
                content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
                success: function(res) {
                    if (res.confirm) {
                        console.log('用户点击确定')
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        },
        fabClick() {
            uni.showToast({
                title: '点击了悬浮按钮',
                icon: 'none'
            })
        },
    }
}