textarea在手机上测试不随页面滚动 - WXOPEN Club

tao44 1楼•4 年前

你这些textarea是在scroll-view之下的呀

rlei 2楼•4 年前

你好，请问下这个问题是怎么解决的呢？我现在在安卓和苹果手机上都存在这个问题，但另外一个页面同样写法却不会出现，textarea放在view中

liangtao 3楼•4 年前

我发布了一个体验版本这儿没发提交附件

czhong 4楼•4 年前

请问，textarea外层有使用scroll-view、swiper、picker-view或movable-view组件么？

qiangliu 5楼•4 年前

哦，5楼的代码我已经改回input了，你把<view class=“listitem_input1tt”><view>Copy TO</view> <view>抄送</view></view>下面的input改成textatea应该就行

xiuyingxue 6楼•4 年前

这个在ios上无问题、在android上才会发生

cuilei 7楼•4 年前

var app = 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) {

var page = this;

if (!(app.editor.codes) && !(app.editor.keywords)) {

var url = 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.keywords

page.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) {

var page = this;

app.editor.sourceCode = "";

app.editor.result = "";

app.editor.notify = "";

var url = 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) {

var currentShowTab = this.data.showTab;

var currentHideTab = this.data.hideTab;

var currentShowTabName = this.data.showTabName;

var currentHideTabName = this.data.hideTabName;

this.setData({

showTab: currentHideTab,

hideTab: currentShowTab,

showTabName: currentHideTabName,

hideTabName: currentShowTabName,

})

},

insertKeyWord: function (e) {

var page = this;

var key = e.currentTarget.dataset.word;

var value;

for (var i = 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) {

var page = this;

var key = e.currentTarget.dataset.code;

var value;

for (var i = 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)

}

})

<view class="page">

<view class="input">

<view class="section">

<textarea value="{{pythonCode}}" bindinput='bindinputHandler' />

</view>

<view class="btn_run_area">

<button class="btn_run" type="primary" bindtap='execute'>运行</button>

</view>

<view class="section-demo">

<view class="weui-flex demo-tab">

<view class="weui-flex__item" data-hideTab="{{hideTab}}" bindtap='changeTab'>{{hideTabName}}</view>

<view class="weui-flex__item active">{{showTabName}}</view>

</view>

<view class="demos" wx:if="{{showTab=='keywordTab'}}">

<view class="view-sp-area">

<view class="keyword" wx:for="{{keywords}}" bindtap='insertKeyWord' data-word="{{item.key}}">{{item.display}}</view>

</view>

<view class="demos" wx:if="{{showTab=='demoTab'}}">

<view class="button-sp-area">

<view >

<view class="demo" wx:for="{{codes}}" bindtap='insertCode' data-code="{{item.key}}">{{item.display}}</view>

</view>

var app = 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 () {

}

})

<view class="page">

<view class="section">

<textarea class="code-area" value="{{sourceCode}}" />

</view>

<view class="title"><view>运行结果</view></view>

<view class="section">

<textarea class='result-area' value="{{result}}" />

</view>

<view class="title"><view>错误提示</view></view>

<view class="section">

<textarea class='error-area' value="{{notify}}" />

</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

}

});

juan58 8楼•4 年前

{{showOrderSet?'':'hide'}} 这个条件是否可能会影响textrea的渲染

kongguiying 9楼•4 年前

我这边复现不出来，方便提供一下完整能复现的代码和样式么？

ping29 10楼•4 年前

.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;}