你想反馈一个 Bug
* Bug 表现 在开发者工具测试正常，在手机上测试不随页面滚动，修改一下会调整回来，一滚动又错位
* 预期表现希望在手机上测试也随页面滚动
* 代码如
<view class="{{showOrderSet?'':'hide'}} remheight">
<view class="textarea_input1">
<!--抄送 -->
<view class="listitem_input1tt"><view>Copy TO</view> <view>抄送</view></view>
<textarea class="listitem_input1left textareaheight" name="copyto" value="{{copyto}}" bindblur='CopyToEmailCheack'/>
</view>
<picker name="CopyTo_picker" class="listitem_input1right" mode="selector" range="{{_CopyToSource}}" range-key="value" bindchange="CopyToPicker">
<text class='fontcolor'>></text>
</picker>
</view>
你这些textarea是在scroll-view之下的呀
我这边复现不出来，方便提供一下完整能复现的代码和样式么？
请问，textarea外层有使用scroll-view、swiper、picker-view或movable-view组件么？
你好，请问下这个问题是怎么解决的呢？我现在在安卓和苹果手机上都存在这个问题，但另外一个页面同样写法却不会出现，textarea放在view中
{{showOrderSet?'':'hide'}} 这个条件是否可能会影响textrea的渲染
这个在ios上无问题、在android上才会发生
varapp = getApp()Page({data: {height:20,focus:false,pythonCode:"",hideTabName:"关键字",showTabName:"案例",showTab:"demoTab",hideTab:"keywordTab",codes: [{ key:'hello1', display:'Hellow World!', code:'print("Hellow World!")'},{ key:'hello2', display:'Hellow World!', code:'print("Hellow World!")'},{ key:'hello3', display:'Hellow World!', code:'print("Hellow World!")'},{ key:'hello4', display:'Hellow World!', code:'print("Hellow World!")'},{ key:'hello5', display:'Hellow World!', code:'print("Hellow World!")'}],keywords: [{ key:'if', display:'if', code:'if'},{ key:'while', display:'while', code:'while'},{ key:'try', display:'try', code:'try'},{ key:'str', display:'str', code:'str'},{ key:'pint', display:'pint', code:'print'},{ key:'for', display:'for', code:'for'}]},/*** 生命周期函数--监听页面加载*/onLoad:function(options) {varpage =this;if(!(app.editor.codes) && !(app.editor.keywords)) {varurl = app.domain +"/codes"wx.request({url: url,//仅为示例，并非真实的接口地址data: {code:this.data.pythonCode,},method:'POST',dataType:'json',header: {'content-type':'application/json'// 默认值},success:function(res) {app.editor.codes = res.data.codes,app.editor.keywords = res.data.keywordspage.setData({codes: res.data.codes,keywords:res.data.keywords})}})}else{page.setData({codes: app.editor.codes,keywords: app.editor.keywords})}},/*** 生命周期函数--监听页面初次渲染完成*/onReady:function() {},bindTextAreaFocus:function(e) {//console.log(e)},bindTextAreaBlur:function(e) {//console.log(e)},bindinputHandler:function(e) {//var cursor = e.detail.cursor;console.log(e.detail.value)this.setData({pythonCode: e.detail.value,})},execute:function(e) {varpage =this;app.editor.sourceCode ="";app.editor.result ="";app.editor.notify ="";varurl = app.domain +"/run"console.log(page.data.pythonCode)wx.request({url: url,//仅为示例，并非真实的接口地址data: {code: page.data.pythonCode,},method:'POST',dataType:'json',header: {'content-type':'application/json'// 默认值},success:function(res) {app.editor.sourceCode = page.data.pythonCode,app.editor.result = res.data.output,app.editor.notify = res.data.notify,wx.navigateTo({url:'result/result',})}})},changeTab:function(e) {varcurrentShowTab =this.data.showTab;varcurrentHideTab =this.data.hideTab;varcurrentShowTabName =this.data.showTabName;varcurrentHideTabName =this.data.hideTabName;this.setData({showTab: currentHideTab,hideTab: currentShowTab,showTabName: currentHideTabName,hideTabName: currentShowTabName,})},insertKeyWord:function(e) {varpage =this;varkey = e.currentTarget.dataset.word;varvalue;for(vari =0; i < page.data.keywords.length ; i++) {if(page.data.keywords[i].key == key) {value = page.data.keywords[i].code;break;}}console.log(page.data.pythonCode +" "+ value)page.setData({pythonCode: page.data.pythonCode +" "+ value,})console.log(e)},insertCode:function(e) {varpage =this;varkey = e.currentTarget.dataset.code;varvalue;for(vari =0; i < page.data.keywords.length; i++) {if(page.data.codes[i].key == key) {value = page.data.codes[i].code;break;}}console.log(value)page.setData({pythonCode: value,})console.log(e)}})<viewclass="page"><viewclass="input"><!--textarea.wxml--><viewclass="section"><textarea value="{{pythonCode}}"bindinput='bindinputHandler'/></view><viewclass="btn_run_area"><buttonclass="btn_run"type="primary"bindtap='execute'>运行</button></view><viewclass="section-demo"><viewclass="weui-flex demo-tab"><viewclass="weui-flex__item"data-hideTab="{{hideTab}}"bindtap='changeTab'>{{hideTabName}}</view><viewclass="weui-flex__item active">{{showTabName}}</view></view><viewclass="demos"wx:if="{{showTab=='keywordTab'}}"><viewclass="view-sp-area"><viewclass="keyword"wx:for="{{keywords}}"bindtap='insertKeyWord'data-word="{{item.key}}">{{item.display}}</view></view></view><viewclass="demos"wx:if="{{showTab=='demoTab'}}"><viewclass="button-sp-area"><view ><viewclass="demo"wx:for="{{codes}}"bindtap='insertCode'data-code="{{item.key}}">{{item.display}}</view></view></view></view></view></view></view>varapp = getApp()Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad:function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady:function() {this.setData({"sourceCode": app.editor.sourceCode,"result": app.editor.result,"notify": app.editor.notify})},/*** 生命周期函数--监听页面显示*/onShow:function() {},/*** 生命周期函数--监听页面隐藏*/onHide:function() {},/*** 生命周期函数--监听页面卸载*/onUnload:function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom:function() {},/*** 用户点击右上角分享*/onShareAppMessage:function() {}})<viewclass="page"><viewclass="section"><textareaclass="code-area"value="{{sourceCode}}"/></view><viewclass="title"><view>运行结果</view></view><viewclass="section"><textareaclass='result-area'value="{{result}}"/></view><viewclass="title"><view>错误提示</view></view><viewclass="section"><textareaclass='error-area'value="{{notify}}"/></view></view>就是这两个页面之间跳转出现的问题
App({data: {},editor:{},domain:'https://colecode.quantdai.com',onLaunch:function() {console.log('App Launch')},onShow:function() {console.log('App Show')},onHide:function() {console.log('App Hide')},globalData: {hasLogin:false}});我发布了一个体验版本 这儿没发提交附件
哦，5楼的代码我已经改回input了 ，你把<view class="listitem_input1tt"><view>Copy TO</view> <view>抄送</view></view>下面的input改成textatea应该就行
.parent {
width: 100%;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
border-bottom: 1px solid #ccc;
font-size:36rpx;
height: 55rpx;
}
.remheight{
height: 160rpx;
border-bottom:1rpx solid #ccc;
padding:0;
display:flex;
flex-direction:row;
}
.textareaheight{
margin-top: 15rpx;
height: 150rpx;
}
.scrollviewMain{
height: 900rpx;}
.scrollviewTopShow{
height: 1603rpx;}
.scrollviewTopHint{
height: 103rpx;}
.primarybutton{width: 730rpx;margin: 5rpx auto;}
.selected{
box-sizing: border-box;
flex: 0 0 35%;
margin: 5rpx 5rpx;
--background-color: #F75000;
--color: white;
color: #000079;
}
.input{
box-sizing: border-box;
flex: 0 0 60%;
margin: 5rpx 5rpx;
--background-color: #F75000;
--color: white;
border: 0;
text-align:left;
display: flex;
flex-wrap: nowrap;
}
.usermotto {
margin-top: 10rpx;
}
.listitem_th{
background: #3366FF;}
.listitem{
height:80rpx;
display:flex;
flex-direction: row;
padding: 5rpx;
border-bottom: 1rpx solid #ccc;
}
.listitem_set{
height:90rpx;
display:flex;
flex-direction: row;
padding: 5rpx;
border-bottom: 1rpx solid #ccc;
background: #E0FFFF;
color: #3366FF;
}
.mainview{
height: 100vh;
display:flex;
flex-direction: column;}
.mainview_top{
height:9vh;
}
.mainview_middle{
height:80vh;
}
.mainview_bottom{
height:7vh;
display:flex;
flex-direction: row;
padding: 1vh 20rpx 2vh;
}
.left1{
width: 10rpx;
height: 10rpx;
}
.left{
width: 40rpx;
height: 80rpx;
}
.right{
flex:1;
height: 80rpx;
display: flex;
flex-direction: row;
}
.rightLeft{
height: 80rpx;
margin-left: 0rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.rightRight{
width: 480rpx;
display: flex;
flex-direction: row;
}
.rightRightItem{
width: 160rpx;
height: 80rpx;
}
.rightRightItemEdit{
width: 159rpx;
height: 90rpx;
border-left:1rpx dashed #ccc;
}
.rightRightQtyData{
width: 159rpx;
height: 80rpx;
}
.rightRightQtyBrowser{
width: 139rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 16px;
padding: 0 10rpx;
}
.fontcolor{
color:#ccc;}
.tr-Design {
height: 40rpx;
font-size: 32rpx;
font-weight: bold;
}
.fontweight_Nomal{
font-weight: normal;
/*padding-bottom: 10rpx;*/
}
.tr-Color {
padding-top: 2rpx;
font-size: 30rpx;
}
.tr-type {
height:40rpx;
width:159rpx;
font-size: 14px;
line-height: 40rpx;
text-align: center;
}
.tr-qty {
height:50rpx;
width:159rpx;
font-size: 14px;
line-height: 50rpx;
text-align: center;
}
.listitem_input{
border:0;
text-align:left;
font-weight: normal;
font-size: 35rpx;
}
.textarea_input1{
border:0;
display: flex;
flex-direction: row;
height:140rpx;
font-size: 30rpx;
/*padding: 23rpx 0 0 0;*/
width: 550rpx;
align-items: center;
justify-content: space-around;
}
.listitem_input1{
border:0;
display: flex;
flex-direction: row;
font-size: 30rpx;
/*padding: 23rpx 0 0 0;*/
width: 550rpx;
align-items: center;
justify-content: space-around;
}
.listitem_input1_DeliveryRequest
{
border:0;
display: flex;
flex-direction: row;
width: 550rpx;}
.listitem_input1tt{
text-align:left;
font-weight: normal;
border:0;
width: 250rpx;
color: #000079;
}
.listitem_input1nr{
text-align:left;
font-weight: normal;
/*font-size: 35rpx;
width: 400rpx;
padding: 24rpx 0 0 0;*/
border:0;
display: flex;
flex-direction: row;
flex: 1;
}
.listitem_input1left{
text-align:left;
font-size: 35rpx;
font-weight: normal;
border:0;
width: 300rpx;
}
.listitem_input2{
border:0;
}
.listitem_input1right{
text-align:left;
font-weight: normal;
font-size: 50rpx;
border:0;
width:50rpx;
/*padding: 10rpx 0 0 0;*/
}
.M_listitem{
width: 730rpx;
height:1600rpx;
display:flex;
flex-direction: row;
margin: 0 auto;
background: #FFfff0;
border-bottom:1rpx solid #ccc;
}
.M_middle{flex: 1;
display: flex;
flex-direction: column;
}
.M_right{width:50rpx;
height: 1600rpx;
display: flex;
flex-direction: column;
}
.M_rightTop{width:50rpx;
height: 1000rpx;
}
.M_rightBottom{width:50rpx;
height: 100rpx;
}
.M_right_hide{
height: 100rpx;}
.M_middleLeft{
height: 71rpx;
/*margin-left: 20rpx;*/
flex: 1;
border-bottom:1rpx solid #ccc;
padding: 0;
display: flex;
flex-direction: row;
}
.M_middleLeft_last{
border-bottom:0;
}
.scrollview{
height: 590rpx;
background-color: #fffafa;
}
.scrollviewHeight1{
height: 700rpx;}
.scrollviewHeight2{
height: 710rpx;}
.scrollviewHeight3{
height: 710rpx;}
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 50rpx;
align-items: center;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 50rpx;
align-items: center;
}
.td {
width:25%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.design {
width:25%;
}
.color {
width:30%;
}
.type {
width:30%;
}
.qty {
width:15%;
}
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden
}
.content {
width: 100%;
padding: 5rpx;
line-height: 22rpx;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px
}
.del {
background-color: orangered;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.total{border-top:1rpx solid #FF6633;
padding-bottom:0; }
.leftradio{
width: 20rpx;
height: 20rpx;
padding-top:20rpx;
}
.Totalleft{
width: 140rpx;
height: 80rpx;
display: flex;
flex-direction: row;
}
.totalleftradio{
width: 40rpx;
height: 40rpx;
padding: 20rpx 0 20rpx 20rpx ;
}
.totalAll{
width:40rpx;
font-size: 30rpx;
padding-top: 18rpx;
}
.Totalright{
width: 560rpx;
height: 90rpx;
display: flex;
flex-direction: row;
}
.TotalrightLeft{
height: 80rpx;
flex: 1;
display:flex;
flex-direction:column;
}
.TotalrightRight{width: 20rpx;}
.TotalDelete{width: 200rpx;height: 60rpx;}
.TotalComplete{width: 200rpx;height: 60rpx;}
.TotalSave{width: 200rpx;height: 60rpx;}
.hide{
display: none;
}
.show{
display: block;
}
.tr_qty_edit{
display: flex;
flex-direction: row;
font-weight: bold;}
.tr_type_edit{font-size:30rpx;padding-top: 3rpx;
}
.tr_qty_middle{width:60rpx;text-align: center;flex:1;}
.addButton{width: 40rpx;height: 40rpx;margin:auto;padding: 0;text-align:center;font-size:17px; line-height:17px;
}
.typeSwatch{background: #EECFA1;}
.typeYardage{background: #D8BFD8;}