- input组件中adjust-position="{{ false }}"未生效,仍上推页面为什么?
基础库:2.18.1;手机型号:任意安卓手机 问题:input组件中adjust-position="{{ false }}",设置以后,该input框仍上推页面,请问如何处理呢? 代码片段:https://developers.weixin.qq.com/s/SbemRZmQ77rD 设置以后,是否上移已经做了相关逻辑判断,参考了https://developers.weixin.qq.com/community/develop/article/doc/00002864144918ff850c9b81a51813 [图片][图片] 详细代码如下: wxml----------------------------- <view class="bg" style="padding:0rpx; position: relative; top:-{{top}}px"> <view class="header"></view> <view class="basicBox"> <view class="mainInfo">基本信息</view> <view class="photoPannel"> <view class="photoLeft"> <view class="item"> <input bindinput="bindNameInput" class="value1" value="{{visitor}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的姓名" id="input1" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line1"></view> <input id="input2" bindinput="bindPhoneInput" class="value1" value="{{visitorPhone}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入您的手机号" type="number" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line1"></view> <view class="key" style="width: 32%;">您的性别</view> <view class="value" style="width:44%;margin-left:30rpx;"> <picker class="picker"style="width:90%" bindchange="bindGenderChange" disabled="{{!editFlag}}" value="{{genderIndex}}" range="{{arrayGender}}"> <view>{{arrayGender[genderIndex]}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> </view> <view class="photoBox" bind:tap="uploadPicture"> <image src="{{imageCode}}" mode="aspectFill"style=" width: 210rpx;height: 280rpx;"></image> <canvas canvas-id="compressCanvasId" style="width:300px;height:300px;position: absolute;left:-350px;top:-350px"></canvas> </view> </view> <view class="item"> <view class="line1"></view> <view class="key">您的公司</view> <input id="input3" bindinput="bindCompanyInput" class="value" value="{{company}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的公司" adjust-position="{{ false }}" /> </view> <view class="item"> <view class="line"></view> <view class="key">访问时间</view> <view class="value"> <picker class="picker" mode="multiSelector" bindchange="bindStartMultiChange" bindcolumnchange="bindTimeColumnChange" value="{{multiStartIndex}}" disabled="{{!editFlag}}" range="{{multiTimeArray}}"> <view class="zan-field__input zan-cell__bd">{{multiStartTime}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> <view class="item"> <view class="line"></view> <view class="key">离开时间</view> <view class="value"> <picker class="picker" mode="multiSelector" bindchange="bindEndMultiChange" bindcolumnchange="bindTimeColumnChange" value="{{multiEndIndex}}" disabled="{{!editFlag}}" range="{{multiTimeArray}}"> <view class="zan-field__input zan-cell__bd">{{multiEndTime}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> <view class="item"> <view class="line"></view> <view class="key">访问事项</view> <input id="input4" bindinput="bindTitleInput" class="value" value="{{title}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入访问事项" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <!-- <view class="item"> <view class="line"></view> <view class="key">上传照片</view> <view bind:tap="uploadPicture" class="value {{ imageFlag ? '': 'placehoder-font' }}"> {{ imageFlag ? surfacePicName : imagePhoto }} </view> </view> --> </view> <view class="leaderInfo"> <view class="mainInfo">其他信息</view> <view class="item"> <view class="line"></view> <view class="key">车牌号</view> <input id="input5" bindinput="bindCarNoInput" class="value" value="{{carNo}}" disabled="{{!editFlag}}" placeholder-style="font-size:32rpx;color:#BFBFBF;line-height:104rpx;" maxlength="30" placeholder="请输入车牌号" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line"></view> <view class="key">员工电话</view> <input id="input6" bindinput="bindStaffPhoneInput" class="value" value="{{staffPhone}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入员工电话" type="number" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line"></view> <view class="key">同行人</view> <view class="value">否</view> </view> </view> <view wx:if="{{buttonFlag=='1'}}" class="button-area"> <view class="submit_bottom" bindtap="submit">提交</view> </view> <view wx:if="{{buttonFlag=='2'}}" class="button-area"> <view class="submit_bottom" bindtap="recall">召回</view> </view> </view> js---------------------------- //输入框上移 inputFocus(e) { console.log('focus', e) const keyboradHeight = e.detail.height const id = e.currentTarget.id this.createSelectorQuery() .select(`#${id}`) .boundingClientRect(rect => { console.log('==> rect', rect) console.log('hegiht', this.data.height) const bottom = this.data.height - rect.bottom console.log('bottom', bottom) console.log('keyboradHeight', keyboradHeight) if (bottom > keyboradHeight) { // 距离足够, 不需要上移 this.setData({ top: 0 }) console.log('不需要') } else { console.log('需要') this.setData({ top: keyboradHeight - bottom }) } }).exec() }, inputBlur(e) { this.setData({ top: 0 }) },
2021-07-22 - input组件中adjust-position="{{ false }}"不生效,只复现于安卓手机。
问题:为了解决input框聚焦后上移问题,设置了adjust-position="{{ false }}" ,通过top:-{{top}}px"自行判断是否上移整个页面。 但安卓机设置了adjust-position="{{ false }}" 以后,仍然会导致input框上移。 代码片段:https://developers.weixin.qq.com/s/SbemRZmQ77rD 正常键盘没弹起情况下如图:: 键盘弹起情况下如图-出现输入框上移 [图片] [图片] 代码如下—————— wmxl文件: <view class="bg" style="padding:0rpx; position: relative; top:-{{top}}px"> <view class="header"></view> <view class="basicBox"> <view class="mainInfo">基本信息</view> <view class="photoPannel"> <view class="photoLeft"> <view class="item"> <input bindinput="bindNameInput" class="value1" value="{{visitor}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的姓名" id="input1" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line1"></view> <input id="input2" bindinput="bindPhoneInput" class="value1" value="{{visitorPhone}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入您的手机号" type="number" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line1"></view> <view class="key" style="width: 32%;">您的性别</view> <view class="value" style="width:44%;margin-left:30rpx;"> <picker class="picker"style="width:90%" bindchange="bindGenderChange" disabled="{{!editFlag}}" value="{{genderIndex}}" range="{{arrayGender}}"> <view>{{arrayGender[genderIndex]}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> </view> <view class="photoBox" bind:tap="uploadPicture"> <image src="{{imageCode}}" mode="aspectFill"style=" width: 210rpx;height: 280rpx;"></image> <canvas canvas-id="compressCanvasId" style="width:300px;height:300px;position: absolute;left:-350px;top:-350px"></canvas> </view> </view> <view class="item"> <view class="line1"></view> <view class="key">您的公司</view> <input id="input3" bindinput="bindCompanyInput" class="value" value="{{company}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入您的公司" adjust-position="{{ false }}" /> </view> <view class="item"> <view class="line"></view> <view class="key">访问时间</view> <view class="value"> <picker class="picker" mode="multiSelector" bindchange="bindStartMultiChange" bindcolumnchange="bindTimeColumnChange" value="{{multiStartIndex}}" disabled="{{!editFlag}}" range="{{multiTimeArray}}"> <view class="zan-field__input zan-cell__bd">{{multiStartTime}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> <view class="item"> <view class="line"></view> <view class="key">离开时间</view> <view class="value"> <picker class="picker" mode="multiSelector" bindchange="bindEndMultiChange" bindcolumnchange="bindTimeColumnChange" value="{{multiEndIndex}}" disabled="{{!editFlag}}" range="{{multiTimeArray}}"> <view class="zan-field__input zan-cell__bd">{{multiEndTime}}</view> </picker> <image class="right" src="../../images/arrow.png"></image> </view> </view> <view class="item"> <view class="line"></view> <view class="key">访问事项</view> <input id="input4" bindinput="bindTitleInput" class="value" value="{{title}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="30" placeholder="请输入访问事项" adjust-position="{{ false }}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <!-- <view class="item"> <view class="line"></view> <view class="key">上传照片</view> <view bind:tap="uploadPicture" class="value {{ imageFlag ? '': 'placehoder-font' }}"> {{ imageFlag ? surfacePicName : imagePhoto }} </view> </view> --> </view> <view class="leaderInfo"> <view class="mainInfo">其他信息</view> <view class="item"> <view class="line"></view> <view class="key">车牌号</view> <input id="input5" bindinput="bindCarNoInput" class="value" value="{{carNo}}" disabled="{{!editFlag}}" placeholder-style="font-size:32rpx;color:#BFBFBF;line-height:104rpx;" maxlength="30" placeholder="请输入车牌号" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line"></view> <view class="key">员工电话</view> <input id="input6" bindinput="bindStaffPhoneInput" class="value" value="{{staffPhone}}" disabled="{{!editFlag}}" placeholder-style="color:#BFBFBF;font-size:32rpx;line-height:104rpx;" maxlength="12" placeholder="请输入员工电话" type="number" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" /> </view> <view class="item"> <view class="line"></view> <view class="key">同行人</view> <view class="value">否</view> </view> </view> <view wx:if="{{buttonFlag=='1'}}" class="button-area"> <view class="submit_bottom" bindtap="submit">提交</view> </view> <view wx:if="{{buttonFlag=='2'}}" class="button-area"> <view class="submit_bottom" bindtap="recall">召回</view> </view> </view> js文件: //输入框上移 inputFocus(e) { console.log('focus', e) const keyboradHeight = e.detail.height const id = e.currentTarget.id this.createSelectorQuery() .select(`#${id}`) .boundingClientRect(rect => { console.log('==> rect', rect) console.log('hegiht', this.data.height) const bottom = this.data.height - rect.bottom console.log('bottom', bottom) console.log('keyboradHeight', keyboradHeight) if (bottom > keyboradHeight) { // 距离足够, 不需要上移 this.setData({ top: 0 }) console.log('不需要') } else { console.log('需要') this.setData({ top: keyboradHeight - bottom }) } }).exec() }, inputBlur(e) { this.setData({ top: 0 }) },
2021-07-22 - 小程序image组件加载svg图片,无法设置大小?
组件:image,加载svg图片。 wxml: <view class="home-box"> <image class="home-run" src="../../images/walk/home_pic.svg" mode="scaleToFill" ></image> </view> wxss: .home-box{ text-align: center; margin-top: 40rpx; } .home-run{ width: 678rpx; height:278rpx; } 问题描述:我需要的图片大小为图中红框大小,css也是设置的这么大,但显示如图并未生效,图中还有边框 模拟器如图 [图片]
2021-01-05 - 小程序拖拽删除时,能否监测这一行为并向后端发请求?
[图片] 当小程序删除时,能否监测到这一行为,并向后台发起请求。 因为删除小程序时,我们需要删除本地缓存中的token,并将后台这一token也进行删除,让用户可以重新登录。现在不知如何处理,请各位大佬提提建议?跪谢!
2020-10-30