收藏
回答

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

问题模块 操作系统 操作系统版本 手机型号 微信版本
客户端 iOS 10.3.3(14G60) iphone6 6.6.1

你想反馈一个 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>



最后一次编辑于  2018-01-19  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

13 个回答

  • June
    June
    2018-01-19

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



    2018-01-19
    赞同
    回复
  • June
    June
    2018-01-19

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

    2018-01-19
    赞同
    回复
  • June
    June
    2018-01-19

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

    2018-01-19
    赞同
    回复
  • JQ_Chan
    JQ_Chan
    2018-02-27

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

    2018-02-27
    赞同
    回复
  • August
    August
    2018-01-19

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


    2018-01-19
    赞同
    回复
  • August
    August
    2018-01-19

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

    2018-01-19
    赞同
    回复
  • August
    August
    2018-01-19
    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">
        <!--textarea.wxml-->
        <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>
          <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>
            </view>
          </view>
        </view>
      </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>
    </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
        }
    });


    2018-01-19
    赞同
    回复
  • August
    August
    2018-01-19

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



    2018-01-19
    赞同
    回复
  • 杨振明
    杨振明
    2018-01-19

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

    2018-01-19
    赞同
    回复
  • 杨振明
    杨振明
    2018-01-19


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


    2018-01-19
    赞同
    回复

正在加载...