微信小程序,textarea占位符位置问题

前言:

​ 众所皆知,小程序是拥有自己的组件的,但是某些情况下,有些组件是为原生组件(个人理解为html照搬过来的标签),层级会比小程序的组件层级高,那么就出现了很多问题,

1.textarea的placeholder跟随屏幕一起飘bug

一般来说使用textarea,的时候,页面如果没有滚动,可能不会出现这个问题,但是一般页面都会需要滚动,就会有这个问题;

网上有很多解决方法;

比如: textarea组件在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true

<textarea fixed="true"></textarea>

但最终结果还是会,经过几番尝试,我采取了以下办法

大概思路是这样:

​ 既然textarea显示有问题,那我们干脆就不要他来显示,我们用一个view来显示,这样就引申出另一个问题,那我要的输入呢? 怎么输入呢,textarea都没了

​ 别急! 我们给view加个点击事件,当点击view的时候 , 把textarea显示出来给用户输入, 输入后的value可以用来给view做展示用,

当textarea输入完 blur 的时候,把textarea隐藏, 显示view 这样就完美解决问题了, 虽然说不是最完美,也不是最简单的解决方法,但是这种方式一劳永逸,也可以锻炼你的js控制样式结构能力

以下是具体代码

wxml

<view class="container"> 
    <textarea placeholder="我是占位符" bind:blur="show_view" wx:if="{{showTextarea}}">我是用来输入的</textarea>
    <view class="show_for_textarea" bind:tap="show_textarea" wx:else>这里是用来显示textarea输入内容的</view>
</view>

js

page:{
    data:{
    showTextarea:false
    },
     show_view(){ //这里用来显示view,
         this.setData({
             showTextarea:false
         }) 
     },
     show_textarea(){ // 这里显示textarea 
         this.setData({
             show_textarea:true
         })
     } 
}

代码很简单你都可以不用看;

至于说placeholder,如何手动实现一个placeholder这么简单就不用我说了吧,相信各位也是大佬

<view v-if="!showTextarea" class="tip"  @click="showtextarea">
    <view class="placeholder" v-if="text.length==0">{{placeholder}}</view >  
    <view  class="content input auto_break" v-else><text >{{text}}</text></view >
</view >

直接判断 textarea 输入值的length就行了

• 总结 : 显示用普通标签显示, 输入用textarea 输入, 至于placeholder嘛爱咋整咋整,

大概就到这里了 886,