微信小程序 MUI 数字输入框效果实现方法全解析

why 72 2024-10-09

本文主要为大家详细介绍了微信小程序实现mui数字输入框效果，我们会以代码的示例来教大家，希望大家能根据这个实现思路来完成自己的mui数字输入框效果。

微信小程序 MUI 数字输入框效果实现方法全解析


WXML


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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

 });

 }

})

注意

button组件的边框和圆角设置在button::after，需要对其重置。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 方法 输入 微信小程序
上一篇:微信小程序折叠面板实现方法详细示例与讲解
下一篇:JS 模拟锚点跳转代码详细解析与实际应用示例
相关文章

 发表评论

暂时没有评论，来抢沙发吧~