How to use WeChat applet to achieve MUI digital input box effect-JS Tutorial-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 digital input box is for your reference. The specific content is as follows

Rendering

How to use WeChat applet to achieve 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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use Dom elements in jQuery?

How to implement the event-responsive progress bar component in Vue

How to implement the exchange method of two variable values in JS

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