微信小程序 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:;

  }

  to {

    opacity:;

  }

}

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失效问题

最新文章

热门文章