工作中遇到的问题
9.17:出现左右滑动(ios)
针对苹果手机查看页面出现左右滑动的问题: 由于设置了padding,安卓等其他手机会自动忽略,但苹果手机会显示出来,所以造成左右滑动。另外,若设置了 position:relative 定位,并设置了left,right属性也可能会导致苹果手机页面左右滑动。
解决办法:
1,给设置了padding属性的地方增加 box-sizing: border-box;
2,尽量避免在使用相对定位时设置过大的左右值
9.18: 上下滑动查看不全(ios)
问题:当底部有button固定时,苹果手机上下滑动查看不全
解决办法:在按钮上方增加一个空白的
demo:
<view class="remark">
<view class="remark-title">备注</view>
<textarea maxlength="200" placeholder="请填写" placeholder-class="placeholder" value="{{plan.remark}}" @input="setRemark" />
<view class="remark-count">{{plan.remark ? plan.remark.length : 0}}/200</view>
</view>
<view class="placeholder-view"></view>
<view class="fixed-button">
<button @tap="save">保存</button>
</view>
.placeholder-view {
width: 100%;
height: 140rpx;
}
10.21:PUT/POST请求时,请求参数全部打散
解决办法:在请求信息中增加headers头部,并将参数字符串化
headers: 'application/json',
body: JSON.stringify(params),
Demo:
static saveMachineEnterEdit(id, params) {
return request({
url: `${apiHostMap.CP_HOST_WEB}/machine-entry-records/${id}`,
method: 'PUT',
headers: 'application/json',
body: JSON.stringify(params),
});
}
10.21: Antd上传图片,获取图片时,因uid问题报错
问题:fileList={infoImages}
中的infoImages
对象必须包含uid,否则会报错。
解决方法:若后端同学返回的格式中不包含uid,则在获取数据时手动增加上。
如:
images.forEach(img => {
img.uid = img.url;
});
完整代码
// 上传获取图片
<Upload
{...uploadProps}
listType="picture-card"
fileList={infoImages}
onChange={({ fileList }) => {
const { dispatch } = this.props;
dispatch({
type: 'machineDetail/overrideStateProps',
payload: {
infoImages: fileList,
},
});
}}
onPreview={this.handlePreview}
>
{infoImages.length >= 5 ? null : uploadButton}
</Upload>
// 获取进场信息
*fetchMachineEnterInfo({ payload }, { call, put }) {
const response = yield call(Machine.fetchMachineEnterInfo, payload);
if (response.XCmdrCode === 0) {
const { images, attachments, is_entry } = response.XCmdrResult;
if (images.length > 0) {
images.forEach(img => {
img.uid = img.url;
});
}
yield put({
type: 'overrideStateProps',
payload: {
infoImages: images,
infoAttachments: attachments,
is_entry,
},
});
}
},
11.12 微信小程序中,父子组件传值问题
问题:父传子,子再传二级子时,数据无法传递过去
解决方法:在子组件中加repeat,通过repeat包裹起来,再将需要的数据传到二级子页面
如:
<repeat for="{{ [carInfo] }}" index="index" item="itemval" key="index">
<OilMass :oil.sync="itemval.fuel.percentage"></OilMass>
</repeat>
2023.1.4 当TimePicker组件置于Radio组件里面时
问题:TimePicker里面的时间无法触发选择
解决方法:这时需要给TimePicker组件增加 getPopupContainer={() => document.getElementById('rightContent')}
, 来定义时间组件浮层的容器