为何我用uni-data-checkbox 标签在APP里调试无法显示？
为何我用uni-data-checkbox 标签微信小程序里调试可以正常显示
但是在手机APP里调试却不显示？是哪里写不对吗？
<template>
<view>
<view class="hz1" style="background-color: #EAEAEA;width: 98%;border-radius: 10px;margin-top: 20rpx;">
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">设备借用与归还日期view>
view>
<view class="hz1 hz3">
<text Selection space="ensp">借用时间：{{a1.l5_sbjytime}}text>
<view class="hz2 ">
<text Selection space="ensp">归还时间：text>
<uni-datetime-picker :border="false" :value="a1.l5_sbghtime" type="datetime" @change="bb1" />
view>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">任课教师姓名view>
view>
<view class="hz3">
<uni-data-select v-model="i1" :localdata="a3" @change="bb2">uni-data-select>
<uni-data-select v-model="i2" :localdata="a4" @change="bb3">uni-data-select>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">是否上课使用view>
view>
<view class="hz3">
<uni-data-checkbox v-model="i3" :localdata="c1" @change="bb4">uni-data-checkbox>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">借用人姓名view>
view>
<view class="hz3" style="height: 60rpx;" v-if="a1.l5_xsif==true">{{a1.l5_name}}(学生)view>
<view class="hz3" style="height: 60rpx;" v-else>
<input class="textarea1" type="text" name="name" :value="a1.l5_name" @input="bb5">input>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">借用人电话view>
view>
<view class="hz3" style="height: 60rpx;" v-if="a1.l5_xsif==true">{{a1.l5_tell}}view>
<view class="hz3" style="height: 60rpx;" v-else>
<input class="textarea1" type="text" name="name" :value="a1.l5_tell" @input="bb6">input>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">添加其他设备view>
view>
<view class="hz3 hz1">
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;" v-if="a5.length !== 0">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">借用设备view>
view>
<view class="hz3">
<uni-data-checkbox :multiple="true" v-model="a14" :localdata="a13" mode="default">
uni-data-checkbox>
{item.name}}
-->
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;" v-if="a1.l5_pzcd">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">拍照存底view>
view>
<view class="hz3">
<swiper circular indicator-dots>
<swiper-item v-for="(item,index) in tpsz" :key="index">
<image :src="item">image>
swiper-item>
swiper>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">备注view>
view>
<view class="hz3">
<textarea class="textarea" @input="bb7" auto-height="true" :value="a1.l5_bz"> textarea>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">首次记单时间view>
view>
<view class="hz3">{{a1.l5_jdtime}}view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;" v-if="a1.l5_zhbjsj">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">最后编辑时间view>
view>
<view class="hz3">{{a1.l5_zhbjsj}}view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;" v-if="a1.l5_jyqrqm">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">借用确认签名view>
view>
<view class="hz3">
<image style="width: 100%;" :mode="item.mode" :src="a1.l5_jyqrqm" mode="aspectFit">image>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;" v-if="a1.l5_ghqrqm">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">归还确认签名view>
view>
<view class="hz3">
<image :mode="item.mode" :src="a1.l5_ghqrqm" mode="aspectFit">image>
view>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">设备是否全部归还view>
view>
<view class="hz3">
<uni-data-checkbox v-model="i4" :localdata="c1" @change="bb9">uni-data-checkbox>
view>
view>
<view style="width: 100%;margin: 25rpx; ">
<button type="default" formType="submit"
style="border-radius:10px;width: 150rpx;height: 80rpx;text-align: center top;" @click="bb11">
<text style="font-size:30rpx;text-align: center top;">编 辑text>
button>
view>
<view class="hz1" style="width: 100%;margin-top: 20rpx;margin: 20rpx 0 40rpx 0;">
<view style="width: 100%;" class="hz2">
<view class="xtb">view>
<view style="margin-left: 20rpx;">管理员编辑记录view>
view>
<view class="hz3">
111
view>
view>
view>
view>
template>
<script>
export default {
data() {
return {
eid: '',
a1: [],
a2: [],
a3: [],
a4: [],
a5: [],
a6: [],
a7: [],
a8: [],
a9: [],
a10: [],
a11: [],
a12: [],
a13: [{
"value": 0,
"text": "篮球"
}, {
"value": 1,
"text": "足球"
}, {
"value": 2,
"text": "游泳"
}],
a14: 1,
sbsz: [],
tpsz: [],
arr1: [],
arr2: [],
datetimesingle: '',
i1: '',
i2: '',
i3: '',
i4: '',
i5: '',
i6: '',
i7: '',
xb1: '',
xb2: '',
c1: [{
text: '否',
value: 0
}, {
text: '是',
value: 1,
}],
classes: '1-2',
}
},
onLoad: function(e) {
// 先接收上个页面传过来的参数 id和nama
console.log(e.id)
this.eid = e.id
this.getData() //调用加载数据方法
},
methods: { // methods包裹函数id
onchange(e) {
console.log('获取', e)
this.a8 = ''
this.i5 = e.detail.value[0].value //获取大楼ID
this.i6 = e.detail.value[1].value //获取设备种类ID
for (let i = 0; i < this.a7.length; i++) { //this.a5.length代表该数组的下标
if (this.i6 == this.a7[i].lbid) {
this.a8 = [...this.a8, this.a7[i]]
}
}
},
bb1(e) {
console.log(e)
},
bb2(e) {
console.log(e)
this.a4 = ''
for (let i = 0; i < this.a2.length; i++) { //this.a5.length代表该数组的下标
if (e == this.a2[i].xy) {
this.a4 = [...this.a4, this.a2[i]]
}
}
},
bb3(e) {
console.log(e)
},
bb4(e) {
console.log(e)
},
bb5(e) {
console.log(e.detail.value) //借用人姓名
},
bb6(e) {
console.log(e.detail.value) //借用人电话
},
bb7(e) {
console.log(e.detail.value) //备注
},
bb8(name, e) {
this.arr2 = []
this.arr1[name + 1] = e.detail.value
this.arr2 = this.arr1.flat() //将借用设备选中的ID的二维数组转化成一维数组
},
bb9(e) {
console.log(e.detail.value) //设备是否还完
},
bb11() {
console.log('编辑提交') //设备是否还完
},
bb12() {
console.log('提交新设备') //设备是否还完
},
bb13(e) {
console.log(e) //添加设备的ID
this.i7 = -1
this.i6 //选中的类别ID
for (let i = 0; i < this.a5.length; i++) { //检测是否已存在该类别
if (this.i6 == this.a5[i].id) {
this.i7 = i //检测存在该类别
}
}
if (this.i7 > -1) {
//取出借用设备原始数据拼接开始
this.a10 = this.a5
this.a5 = ''
for (let k = 0; k < e.detail.data.length; k++) {
this.a10[this.i7][0].push({
"text": e.detail.data[k].text,
"value": e.detail.data[k].value,
})
this.a11 = e.detail.data[k].value
}
this.a5 = this.a10
//取出借用设备原始数据拼接完毕
//开始删除未借用设备
//获取下标1
this.xb1 = ''
console.log(this.a7)
for (var i = 0; i < this.a7.length; i++) {
if (this.a11 == this.a7[i].value) {
this.xb1 = i
}
}
//从列表中删除该设备
console.log('未删除a7', this.a7)
this.a12 = this.a7.splice(this.xb1, 1)
console.log('下标1', this.xb1)
console.log('已删除a7', this.a7)
//删除未借用设备列表结束
} else {
console.log('没有该类别')
}
},
bb14(e) {
console.log('节点', e)
},
//下拉刷新
onPullDownRefresh() {
console.log('下拉了'),
this.getData() //调用加载数据方法
},
getData() {
//开始请求服务器数据结束
this.myRequest({
url: '1.asp',
data: {
id1: 6,
id2: 'addoil',
id3: this.eid
},
}).then(res => {
uni.stopPullDownRefresh(); //停止下拉刷新
console.log(res.data)
this.a1 = res.data.a1[0][1]
this.a2 = res.data.a2[0] //读取所有教师名字
this.a4 = res.data.a2[0] //读取所有教师名字(共用数组)
this.a3 = res.data.a3[0] //读取所有学院名称
this.a5 = res.data.a5[0] //读取所有借用设备类型，作为共用
this.a6 = res.data.a6[0] //读取所有借用设备类型(还未借出的)
console.log(this.a6)
this.a7 = res.data.a7[0] //读取所有设备名称和ID
this.a9 = res.data.a5[0] //读取所有借用设备类型，作为原始数据
//定位教师所属学院ID
this.i1 = this.a1.l5_skjsxyid
//定位教师ID
this.i2 = this.a1.l5_jsid
//定位是否上课使用
this.i3 = this.a1.l5_ifsk
//设备是否还完
this.i4 = this.a1.l5_sbgh
//定位轮播图
this.tpsz = res.data.a4[0]
// 输出借用设备（未还）
this.arr1 = new Array(this.a5.length) //按照数组的总数量定义一个空的数组
})
//开始请求服务器数据结束
},
}
}
script>
- 文章：uni-app checkbox 修改样式 中也许有你想要的答案，请看下吧
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
uni-data-checkbox 是 uview 封装的多选框组件，可能需要安装 uview-ui 包并在页面中引入组件。
在微信小程序中可以正常显示，但在 APP 中无法显示，则需要检查以下几个可能的原因：
- 是否正确引入了 uview-ui 依赖，并正确使用 uni-app 的引入方式引入了 uni
如果我的回答解决了您的问题，请采纳！
你用的是uni-app构建原生应用程序，就会导致uni-data-checkbox在原生应用程序中不会正常显示
因为uni-data-checkbox组件在构建原生应用程序时要进行特定的配置和打包，确保能够在原生应用程序中正常工作。检查你的应用程序配置和打包正确，或者考虑使用其他可用的复选框组件
代码中引用了uni-data-select组件。这个组件能够正常工作，那么应用程序才可以正确配置和打包。再次检查uni-data-checkbox组件的正确使用方式