微信小程序 input使用letter-spacing失效问题

Posted happyYawen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 input使用letter-spacing失效问题相关的知识,希望对你有一定的参考价值。

根据ui设计稿,

本来思路是一个input搞定,下面的线使用背景图

background:url(\'/images/line.png\')no-repeat bottom center;

然后使用letter-spacing,让字体间隔开。

但是遇到了小程序的坑,letter-sapcing在input中没效果。

于是我gitlab上找到一个,模拟光标输入框的源码,并借鉴了作者的思路。(链接如下:https://github.com/evan2020/six-Input-box)

于是我的新思路是这样的:

仍然使用一个input,并设置auto-focus,这样当进入页面的时候,手机端会自动弹出数字键盘。

然后模拟光标的css如下:

.cursor {
  width: 1px;
  height:80rpx;
  background-color: #2AC3A4;
  animation: focus 0.7s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

1)input设置margin-left:-100%,不显示在页面可视区域中,

2)上面线框位置,使用view标签,仍然使用背景图展示下面的间断线

3)使用bindinput监听input值的变化,并通过numList = [...e.detail.value]将input的值(字符串)转换为数组。并渲染在view中

<view id="searchNum" class="set-number" style="background:url({{line}}) no-repeat bottom center;background-size:100%">
    <view class="set-number-content">
      <view wx:if="{{!numList.length}}" class="cursor"></view>
      <text wx:if="{{numList.length}}">{{numList[0]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===1}}" class="cursor"></view>
      <text wx:if="{{numList.length>=2}}">{{numList[1]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===2}}" class="cursor"></view>
      <text wx:if="{{numList.length>=3}}">{{numList[2]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===3}}" class="cursor"></view>
      <text wx:if="{{numList.length>=4}}">{{numList[3]}}</text>
    </view>
  </view>

大家有更好的思路的,欢迎来赐教

以上是关于微信小程序 input使用letter-spacing失效问题的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序输入框禁止自动弹出

微信小程序 输入框 input 组件

微信小程序基础之input输入框控件

微信小程序 input使用letter-spacing失效问题

微信小程序文本输入<input/> 详解

pc,微信小程序改变input输入框placeholder的字体样式