点击眼睛图标更改密码显示格式

使用场景:

        <view class="info_input">
                <input type="{{passwordType}}" placeholder-class="incolor" maxlength="16" name="password" placeholder="请输入密码" />
               <view catchtap="testTap" class="look_pwd incursor"></view>
            </view>

var indexPwdType = 'password';

var pageObject = {

data: {

passwordType: indexPwdType,

},

...

}

testTap: function () {

if (indexPwdType == 'password') {

indexPwdType = 'text';

this.setData({

passwordType: 'text'

});

} else {

indexPwdType = 'password';

this.setData({

passwordType: 'password'

});

}

}

如果眼睛需要变换背景图片,那么

 testTap: function () {
        if (indexPwdType == 'password') {
            indexPwdType = 'text';
            var show = "http://cache.img.etailor.me/wap/appimg/xcx/new_img/show2.png";
            this.setData({
                passwordType: 'text',
                BackgroundImg: show
            });
        } else {
            indexPwdType = 'password';
            var noshow = "http://cache.img.etailor.me/wap/appimg/xcx/new_img/no_show.png";
            this.setData({
                passwordType: 'password',
                BackgroundImg: noshow
            });
        }
    }

在data里双向绑定一个数据

BackgroundImg:"http://cache.img.etailor.me/wap/appimg/xcx/new_img/show2.png"

<view catchtap="testTap" class="look_pwd incursor" style="background-image: url({{BackgroundImg}})"></view>

猜你喜欢

转载自blog.csdn.net/weixin_38245489/article/details/81666297
今日推荐