第9课：常用组件大盘点
进度 0/30
🧰
常用组件大盘点
认识组件军火库
📖知识引入
📦view万能容器
布局全靠它，相当于网页里的div。想装什么装什么，还能套娃使用搭复杂结构。
✍️text与image
text放文字，user-select属性还能让文字可复制；image放图片，mode属性控制裁剪缩放方式。
🔘button按钮
自带微信风格，一点就触发事件。open-type属性还能解锁特殊技能：转发、获取用户信息。
⌨️input输入框
用户打字的窗口：placeholder是灰色提示语，bindinput实时监听输入，value设置显示内容。
🎠swiper轮播图
商城首页会自动滚动的横幅就是它！自动播放+手势滑动+指示点，一行标签全搞定。
💡
组件=预制家具，拿来就用，自带微信风格！
🔍组件连连看
<!-- 轮播图 -->
<swiper indicator-dots autoplay>
<swiper-item><image src="/images/1.png"/></swiper-item>
<swiper-item><image src="/images/2.png"/></swiper-item>
</swiper>
<!-- 输入框：实时监听输入 -->
<input placeholder="请输入昵称" bindinput="onInput" />
<!-- 分享按钮 -->
<button open-type="share">分享给好友</button>组件和家具对照表：
view → 空纸箱（装啥都行） text → 文字标签纸 image → 相框 button → 门铃（一按有反应） input → 留言本（可写字） swiper → 旋转展台（轮播图） checkbox → 打勾清单 picker → 点菜单（滚动选择）
这些组件由微信官方提供， 自带手机端优化， 直接写标签就能召唤！
（网页里的<div> 在小程序里不存在哦， 要用<view>）
🎯小测验
第1题：想在页面显示一张图片，用哪个组件？
第2题：首页自动滚动的广告横幅，一般用哪个组件实现？
第3题：input输入框的bindinput事件什么时候触发？
📝本课知识点
- ✓view是万能容器
- ✓text写字、image放图
- ✓button自带微信风格
- ✓input负责用户输入
- ✓swiper制作轮播横幅
第9课完成！继续探索下一课吧 🚀