<template>
<view class="page">
<view class="title">扫码结果</view>
<view class="result_list">
<view v-for="item in list" :key="item" class="result_li">
{{ item }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
webView:null,
barcode:null,
list:[]
}
},
methods: {
// 扫码成功回调
onmarked(type, result) {
// 【步骤4】将扫码结果添加到 list 里
this.list.push(result)
// 【步骤5】1秒后再重新开启扫码
setTimeout(() => {
this.barcode.start()
}, 1000)
},
// 创建窗口和扫码控件
createBarcode() {
// 【步骤1】判断有没有创建过 webview 容器,如果没有就执行创建操作
if (!this.webView) {
this.webView = plus.webview.open(
'',
'barCodeBox',
{
top: '60px',
width: '100%',
height: '200px'
}
)
}
// 【步骤2】判断有没有创建过 扫码框,如果没有就执行创建操作
if(!this.barcode){
this.barcode = plus.barcode.create(
'barcode',
[plus.barcode.QR], // 只扫二维码
{
top:'0px',
left:'0px',
width: '100%',
height: '200px',
position: 'static',
scanbarColor: '#f1c01f',
frameColor: '#c0ff01'
}
)
this.barcode.onmarked = this.onmarked // 扫码结果回调函数
// 【步骤3】将扫码框添加到 webview 里
plus.webview.getWebviewById('barCodeBox').append(this.barcode)
}
this.barcode.start() // 开始扫码
}
},
onReady() {
setTimeout(() => {
this.createBarcode()
}, 300)
}
}
</script>
<style>
.page {
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 200px 20rpx 0;
}
.title {
font-size: 50rpx;
color: #333;
}
.result_list {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding-top: 20rpx;
}
.result_li {
box-sizing: border-box;
margin-bottom: 20rpx;
padding: 10rpx 20rpx;
border: 1px solid #7298c8;
border-radius: 10rpx;
font-size: 40rpx;
}
</style>
uni-app App端半屏连续扫码
最新推荐文章于 2023-12-19 15:17:48 发布