小程序开发系列------五、组件学习(补充)

「爱情、让人受尽委屈。」 2022-11-09 03:49 115阅读 0赞

上篇文章：[小程序开发系列------五、组件学习（顺手写个简易版的计算器）][------]我们学习了小程序基础组件的使用，为了获取点成就感和提升学习兴趣，我写了个简单的计算器，其实算是有点跑题了，见谅。  
其实小程序源生的组件很多和html中的组件是一样的，这篇文章我们来看看一些和html中组件的使用方式不大一样的组件（随着学习慢慢往文章里补充）：  
①<input>  
对于这个组件，在html中的使用方式，有html编程经验的应该有所感触，各种繁杂的校验，确实有点恶心，但是在小程序中就不一样了，这个组件在小程序中type属性有四个值：text、number、idcard和digit  
体验一把：

<view>
    <text>文字输入：</text>
    <input type="text" placeholder="请输入文字" placeholder-style="color:#d0d0d0" style="border:8rpx solid greenyellow"/>
    </view>
    <view>
    <text>数字输入：</text>
    <input type="number" placeholder="请输入数字" placeholder-style="color:#d0d0d0" style="border:8rpx solid greenyellow"/>
    </view>
    <view>
    <text>身份证号输入：</text>
    <input type="idcard" placeholder="请输入身份证号" placeholder-style="color:#d0d0d0" style="border:8rpx solid greenyellow"/>
    </view>
    <view>
    <text>浮点型数字输入</text>
    <input type="digit" placeholder="请输入浮点型数字" placeholder-style="color:#d0d0d0" style="border:8rpx solid greenyellow"/>
    </view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
从此可以抛弃很多种复杂繁琐的校验了。

[------]: https://blog.csdn.net/sun_luming/article/details/113766340
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: /images/20221023/29f475113bb5442597420338f0fc8164.png