WeChat applet implements MUI digital input box effect-Mini Program Development-php.cn

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

WeChat applet implements MUI digital input box effect

WXML

 默认        限定最小值0,最大值10

Copy after login

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; }

Copy after login

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 }); } })

Copy after login

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!