uni-app App端半屏连续扫码

<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>