uniapp 自定义二维码扫描

<view class="scanCode_box">
            <camera class='camera' mode="scanCode" @error="cameraError" @scancode='scancode' frame-size='large'>
                <cover-view class='animation' :animation="animation"></cover-view>
            </camera>
        </view>
1
2
3
4
5
6
7
8
9
let animation = uni.createAnimation({});
export default {
data(){
animation,
}
}
onShow() {
            this.donghua()
        },

  

复制代码
    methods: {
            donghua() {
                let that = this;
                let scode = true
                setInterval(function() {
                    if (scode) {
                        animation.translateY(200).step({
                            duration: 3000
                        })
                        scode = !scode;
                    } else {
                        animation.translateY(-10).step({
                            duration: 3000
                        })
                        scode = !scode;
                    }
                    that.animation = animation.export()

                }.bind(this), 3000)
            },
            scancode(e) {
                // 扫描结果
                let res = e.detail.result
                console.log(res);
            },
            
        }
复制代码
复制代码
.scanCode_box {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #f8f8f9;
        position: fixed;
        align-items: center;
        justify-content: space-around;
    }

    .camera {
        width: 480rpx;
        height: 450rpx;
        border-radius: 6rpx;
        margin: 30rpx;
    }

    .animation {
        position: absolute;
        left: 4rpx;
        width: 480rpx;
        height: 2rpx;
        background-color: #4CD964;
        border-radius: 50%;
    }
复制代码

 

posted @   脆脆啥  阅读(1345)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示