Shulou(Shulou.com)05/31 Report--

This article mainly introduces WeChat Mini Programs how to achieve MUI digital input box effect related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this WeChat Mini Programs how to achieve MUI digital input box effect article will have a harvest, let's take a look at it.

Effect picture

WXML

Default-+ limits the minimum value to 0 and the maximum value to 10-+

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.