需求如下：通过点击按钮动态切换 placeholder 提醒文字的颜色
方案一，使用'placerholder-class'，模拟器和真机均有效，代码如下：
<view class="container"> <view> <button bindtap="setPlaceholderClass" data-color="red"> red |
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
|
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); }}) |
欢迎补充~
