收藏
评论

动态切换placeholder样式问题及解决方案


需求如下:通过点击按钮动态切换 placeholder 提醒文字的颜色


   方案一,使用'placerholder-class',模拟器和真机均有效,代码如下:

<view class="container">
 <view>
   <button bindtap="setPlaceholderClass" data-color="red"> red button>
   <button bindtap="setPlaceholderClass" data-color="green"> green button>
   <button bindtap="setPlaceholderClass" data-color="blue"> blue button>
 view>
 <input class='input' placeholder-class='{{ className }}' placeholder='请输入' />
view>

.input {

 margin-top: 30px;
 width: 100%;
}
.red {
 color: red;
}
.green {
 color: green;
}
.blue {
 color: blue;
}
const app = getApp()
Page({
 data: {
   show: true,
   className: 'red'
 },
 setPlaceholderClass: function (e) {
   this.setData({
     className: e.target.dataset.color
   });
 }
})

   


方案二,使用'placerholder-style', 模拟器有效,真机无效

    直接使用该属性发现在手机上切换之后 placeholder 的颜色并没有改变,此时如果通过手动让 input 获取焦点的方式,会发现 input 的 placeholder 颜色触发更新;

   

   分析原因是直接修改 placeholder-style 之后没有触发 input 组件的更新机制,所以下面的方式通过 wx:if 手动触发更新,实现相同效果,代码如下:

<view class="container">
 <view>
   <button bindtap="setPlaceholderClass" data-color="red"> red button>
   <button bindtap="setPlaceholderClass" data-color="green"> green button>
   <button bindtap="setPlaceholderClass" data-color="blue"> blue button>
 view>
 <input class='input' wx:if="{{ show }}" placeholder-style='{{ className }}' placeholder='请输入' />

view>


const app = getApp()
Page({
 data: {
   show: true,
   className: 'color:red'
 },
 setPlaceholderClass: function (e) {
   var self = this;
   self.setData({
     show: false,
     className: 'color:' + e.target.dataset.color
   });
   setTimeout(function() {
     self.setData({
       show: true
     });
   }, 20);
 }
})


欢迎补充~

最后一次编辑于  2018-05-03  (未经腾讯允许,不得转载)
复制链接收藏赞 0