一、html代码
小程序没有双向绑定,在数据组装的时候可能会遇到困难。
1.radio单选
(1)遇到一个难以区分id的问题,我的解决方法是直接把id传过去。
@change="radioChange( e v e n t , i t e m . i d ) " ( 2 )类似于 r a d i o C h a n g e 如果只有一个参数时是直接把 event,item.id)" (2)类似于radioChange如果只有一个参数时是直接把 event,item.id)"(2)类似于radioChange如果只有一个参数时是直接把event给隐藏的。要传2个参数时必须写$event。
(3)在循环内控制这个checked的状态和value值要注意
2.图片上传
(1)我这里没有让用户看到自己上传了什么图片,只是显示了图片有没有上传成功。
(2)按道理应该要看到,我们可以使用uniapp中的扩展插件。
uni-file-picker 可以把图片显示出来。
官方文档: https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html
后面发现uniapp提供了很多扩展插件,很多很好用也很常用。下次调整小程序优先选择的使用扩展插件。直接可以使用无需下载
(3)图片和视频上传给后台的是一个url,我们要考虑上传多张图片时该怎么弄。
<template>
<view class="form-wraper">
<form @submit="formSubmit">
<view class="uni-form-item uni-column">
<view class="title">网关编码</view>
<view class="input">
{
{
form.gatewayCode}}
</view>
</view>
<view class=" uni-column">
<view class="checkbox">
<view class="list" v-for="item in form.itemList" :key="item.id">
<view style="display:flex;">
<view>{
{
item.inspectItemName}}</view>
<view style="margin-left:20px">
<!-- <radio-group @change="radioChange($event,item.id)" style="display:flex" >
<label class="uni-list-cell uni-list-cell-pd" v-for="(status, index) in item.statusList" :key="status.value">
<view>
<radio :value="status.value" :checked="status.checked" />
</view>
<view>{
{
status.name}}</view>
</label>
</radio-group> -->
<radio-group @change="radioChange($event,item.id)" style="display:flex" >
<label class="radio"><radio :value="0" :checked="true" />正常</label>
<label class="radio"><radio :value="1" />不正常</label>
</radio-group>
</view>
</view>
<view class="text"><