前言:
众所皆知,小程序是拥有自己的组件的,但是某些情况下,有些组件是为原生组件(个人理解为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,
