WeChat applet implements MUI digital input box effect

This article mainly introduces the WeChat applet to implement the MUI digital input box effect in detail. It has a certain reference value. Interested friends can refer to it.

The example in this article is shared with everyone on WeChat. The specific code of the mini program to implement the MUI number input box is for your reference. The specific content is as follows

Rendering

WXML

<view class="tui-content">
 <view class="tui-gallery-list">默认</view>
 <view class="tui-gallery-list">
 <view class="tui-number-group">
  <button class="tui-number-cell" bindtap="nextNum">-</button>
  <input class="tui-number-cell" type="number" value=&#39;{{number}}&#39;></input>
  <button class="tui-number-cell" bindtap="prevNum">+</button>
 </view>
 </view>
 <view class="tui-gallery-list">限定最小值0,最大值10</view>
 <view class="tui-gallery-list">
 <view class="tui-number-group">
  <button class="tui-number-cell" bindtap="nextNum1" disabled=&#39;{{disabled1}}&#39;>-</button>
  <input class="tui-number-cell" type="number" value=&#39;{{number1}}&#39;></input>
  <button class="tui-number-cell" bindtap="prevNum1" disabled=&#39;{{disabled2}}&#39;>+</button>
 </view>
 </view>
</view>

WXSS

.tui-number-group{
 display: table;
 table-layout: fixed;
 width: 300rpx;
 text-align: center;
 border-radius: 6px;
 border: 1px solid #bbb;
 overflow: hidden;
}
.tui-number-cell{
 display: table-cell;
 line-height: 1.7;
 border-radius: 0;
}
button::after{
 border-bottom: none;
 border-top: none;
 border-radius: 0;
}

JS

Page({
 data: {
 number: 1,
 number1: 5,
 disabled1: false,
 disabled2: false
 },
 prevNum(){
 this.setData({ number: this.data.number + 1 });
 },
 nextNum(){
 this.setData({ number: this.data.number - 1 });
 },
 prevNum1() {
 this.setData({ 
  number1: this.data.number1 >= 10 ? 10 : this.data.number1 + 1 ,
  disabled1: this.data.number1 !== 0 ? false : true,
  disabled2: this.data.number1 !== 10 ? false : true
 });
 },
 nextNum1() {
 this.setData({ 
  number1: this.data.number1 <= 0 ? 0 : this.data.number1 - 1 ,
  disabled1: this.data.number1 !== 0 ? false : true,
  disabled2: this.data.number1 !== 10 ? false : true
 });
 }
})

Note

The border and rounded corners of the button component are set in button::after and need to be reset.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How the WeChat applet implements the adaptive width ratio display of the image component picture

WeChat applet The use of input forms, redio and drop-down lists in the program

Introduction to the video playback and barrage functions of vidao in the WeChat applet

The above is the detailed content of WeChat applet implements MUI digital input box effect. For more information, please follow other related articles on the PHP Chinese website!