工作中遇到的问题

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 {
         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,
                    },
                });
            }
        },