更新记录

1.0.1（2025-01-17） 下载此版本

优化体验

1.0.0（2025-01-17） 下载此版本

滑动按钮1.0.0发布了，为开发者解决滑动问题~，提高生产效率。

平台兼容性

引入

import moveButton from "@/uni_modules/move-button";

代码演示

<template>
    <view class="content">
        <view class="footer">
            <view class="cancel">
                取消
            </view>
            <view class="confirm">
                <moveButton ref="movebutton" 
                                tip-text="滑动接单" 
                                success-text="接单成功" 
                                box-bg-color="#ccc" 
                                boxColor="#000" 
                                btn-bg-color="#000" 
                                btnColor="#fff"
                                @confrim="success" 
                                @cancel="end"></moveButton>
            </view>
        </view>
    </view>
</template>

<script setup>
        // 此处下载的插件可能需要更改哦~
    import moveButton from "@/uni_modules/move-button";
    import { ref } from "vue";

    // 定义组件的ref实例 用于调用成功之后重置按钮位置
    const movebutton = ref(null)

        // 滑动成功之后的回调
    function success(e){
        uni.showLoading({
            title:"抢单中..."
        })
        setTimeout(()=>{
            uni.hideLoading()
            uni.showToast({
                title:"抢单成功"
            })
            // 重置按钮位置
            movebutton.value.reset()
        },2000)
    }

    // 滑动途中释放的事件
    function end(e){
        uni.showToast({
            icon:"error",
            title:"取消抢单"
        })
    }

</script>

<style >

    .footer{
        position: fixed;
        bottom: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16rpx;
        box-sizing: border-box;

    }
        .cancel{
        background-color: #ccc;
        width: 140rpx;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 40rpx;
        border-radius: 12rpx;
    }
</style>

Props

Events