textarea：textarea內容不隨滾動條滾動，微信小程序多行輸入框Debug，內容不隨滾動條滾動，與外部滾動條衝突，特定開發多行輸入框組件

 

 

index頁面

<textutil wx:if="{{textutil}}" maxlength="20" value="{{remarks}}" bind:close="" bind:input="" />

組件放在最外層，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": {
  }
}

<view class="all">
  <view class="allMask all" bindtap="close" ></view>
  <view class="title {{cssDefault?'default':''}};">
    <view style="height: {{statusBarHeight}}px;"></view>
    <view>
      <view class="all name">
        <text wx:if="{{isTle}}">{{title}}</text>
      </view>
    </view>
  </view>
  <view class="root">
    <view class="">
      <textarea class="all" value="{{value}}" bindinput="textinput" placeholder="{{placeholder}}" maxlength="{{maxlength}}"></textarea>
      <view class="btn">
        <view hover-class="hover" bindtap="cancel" >取消</view>
        <view class="length">{{value.length}}/{{maxlength}}</view>
        <view hover-class="hover" bindtap="ok" >確定</view>
      </view>
    </view>
  </view>
</view>

@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：組件顯示隱藏

<view class="textarea">
    <view class="all" bindtap="textarea">{{user.remarks}}</view>
</view>

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