textarea：textarea内容不随滚动条滚动，微信小程序多行输入框Debug，内容不随滚动条滚动，与外部滚动条冲突，特定开发多行输入框组件

 

 

index页面

组件放在最外层，page的子节点

json文件：

{
    
  "navigationStyle": "custom",    //隐藏标题栏，导航栏
    "usingComponents": {
        "textutil":"/utils/textutil/textutil"

    }

}

textutil 组件

let this_;
const app = getApp()
Component({
  behaviors: [],
  properties: {
    show: {            //没使用
      type: Boolean,
      value: true
    },
    isTle: {
      type: Boolean,
      value: false
    },
    title: {
      type: String,
      value: ''
    },
    cssDefault: {
      type: Boolean,
      value: false
    },
    maxlength: {
      type: Number,
      value: 8000
    },
    placeholder: {
      type: String,
      value: '请输入...'
    },
    value: {
      /**选择器定位value值*/
      type: String,
      observer(e) {
      }
    },
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight
  },

  lifetimes: {
    attached() {
      this_=this;
    },
  },
  methods: {
    textinput(e) {
      console.log(this_.data.length);
      var value = e.detail.value;
      this.properties.value = value;
      this.setData({value: value});
      this.change();
    },
    cancel() {
      this.close();
    },
    close() {
      this.triggerEvent('close');
    },
    ok() {
      this.input();
      this.close();
    },
    input: function () {
      this.triggerEvent('input', { value: this.properties.value});
    },
    change: function () {
      this.triggerEvent('change', { value: this.properties.value});
    },
  }
});

{
  "component": true,
  "usingComponents": {
  }
}

  
  
    
    
      
        {{title}}
      
    
  
  
    
      
      
        取消
        {{value.length}}/{{maxlength}}
        确定
      
    
  

@import "/app.wxss";
@import "/utils/initi/initi.wxss";
textutil{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5200;
}
textutil>.all{
  display: flex;
  flex-direction: column;
  position: relative;
}
textutil>.all>.title{
  flex-shrink: 0;
}
textutil>.all>.root{
  flex-grow: 1;
  /* position: relative; */
}
.root>view{
  height: 50%;
  position: absolute;
}
.root textarea,.root>view,.btn{
  opacity:1;
  background-color: white;
}
.allMask{
  z-index: 0;
}
.btn{
  display: flex;
  justify-content: space-between;
}
.btn>view{
  width: auto;
  padding: .5rem;
  color: rgb(0, 132, 255);
}
.btn>.length{
  color: black;
}

 

app.wxss:

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
page,.all,image,pickertool,.allMask,initi{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.allMask{
  background-color: #888;
  opacity: 0.5;
  z-index: 5000;
  position: absolute;
}
page>view{
  z-index: 10;
}
pickertool{
 position: absolute;
}
page{
  position: relative;
}
page>.all{
  position: absolute;
}
view {
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.normal{
  word-wrap: normal;
}

.transparent{
  opacity: 0;
}
.appColor{
  color: #15A05E;
}
.appbackground{
  background-color: #15A05E;
}
.scroll{
  overflow-y:scroll;
}
.white{
  color: white;
}
.image{
 	background-repeat: no-repeat;
 	background-size: 100% 100%;
 }
.hover{
  opacity: 0.5;
}
.hoverWhite{
  opacity: 0.5;
  color: #fff5;
}
.error{
  position: absolute;
  bottom: 15%;
  height: 2.5rem;
  top: 15%;
  z-index: 5000;
  display: flex;
}
.error>view{
  border-radius: 1rem;
  width: 65%;
  height: 100%;
  display: flex;
  padding: .1rem .5rem;
  margin: auto;
  background-color: black;
  /* opacity: 0.7; */
}
.error text{
 color: white;
 margin: auto;
 font-size:1rem;
 word-wrap: break-word;
 overflow: visible;
}
.errorColor{
 color: red;
 opacity: 0.5;
}
.errorText{
 color: red;
}
.red{
 color: red;
}

initi.wxss:

.all,.allMask,initi{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
initi{
  position: absolute;
  z-index: 6000;
}
initi>.all{
  position: absolute;
  display: flex;
  flex-direction: column;
}
initi>.all>.root{
  flex-grow: 1;
  background-color: #eee;
  display: flex;
  flex-direction: column;
}
.title{

}
.title>view:last-child{
  height: 3rem;
}
.name{
  display: flex;
  color: white;
}
.name>text{
  color: white;
  margin: auto;
  font-size: 1.3rem;
}
.default{
  background-color: #15A05E;
}
initi loading{
  width: 7rem;
  height: 7rem;
  margin: auto;
  margin-top: 1rem;
  position: relative;
}

代码补充：

app:导航栏高度

    try{
      wx.getSystemInfo({
        success: function (res) {
          this_.globalData.statusBarHeight = res.statusBarHeight;
        }
      })
    } catch (e) {
      console.log(e);
    }

 

index.js：组件显示隐藏

    {{user.remarks}}

  textarea(){
    this_.setData({textutil:true});
  },
  textutilClose() {
    this_.setData({ textutil: false });
  },