4、基础组件入门：view、text、image、scroll-view、swiper组件的使用与实战
好，咱们今天聊聊抖音小程序里最基础、也最常用的几个组件。
说实话，很多新手一上来就追那些花里胡哨的高级组件，结果连 view 和 text 的坑都没踩明白。我个人习惯是，先把地基打牢。你想想看，抖音上那些爆款小程序，UI 再炫，底层也离不开这几个基础组件。
4.1 view：万能的容器
view 就是小程序的 div。它负责布局、分组、做背景。
我在项目中遇到过一个问题：两个 view 之间总有一条莫名其妙的缝隙。后来发现是默认的 flex 布局导致的。嗯，这里要注意，抖音小程序的 view 默认是 display: flex，而且 flex-direction 是 column。
核心要点：
- view 默认 flex 布局，方向为 column
- 可以用
hover-class实现点击态，省去写 js 的麻烦 - 不要滥用 view 嵌套，超过 5 层就要考虑重构了
<!-- 一个典型的卡片布局 -->
<view class="card" hover-class="card-hover">
<view class="card-title">标题</view>
<view class="card-content">内容区域</view>
</view>我的小技巧： 用 hover-start-time 和 hover-stay-time 控制点击反馈的延迟和停留时间。我一般设成 50ms 和 200ms，手感最自然。
4.2 text：不只是显示文字
text 组件看起来简单，但坑不少。说白了，它就是用来展示文本的，但有几个特性你必须知道。
我曾经在做一个用户协议页面时，发现长文本无法自动换行。排查了半天，原来是 text 组件默认 user-select 是关闭的，而且它不支持嵌套块级元素。
避坑指南：
- text 组件内只能包含 text 组件，不能放 view
- 长文本记得加
word-break: break-all - 需要选中复制的文本，设置
user-select: true
<!-- 可复制的文本 -->
<text user-select="{{true}}">这是一段可以复制的文本内容</text>
<!-- 带省略号的多行文本 -->
<text class="ellipsis-text">这是一段很长的文本，超出两行后会显示省略号</text>4.3 image：图片加载的那些事
image 组件是性能杀手。我见过太多小程序因为图片没处理好，导致页面加载慢得像蜗牛。
为什么会这样？因为抖音小程序的环境下，图片请求是走 CDN 的，但如果你不设置宽高，它会先加载原图再缩放，这中间的性能损耗非常大。
| 属性 | 说明 | 我的建议 |
|---|---|---|
| src | 图片地址 | 必须使用 HTTPS |
| mode | 裁剪模式 | 列表用 aspectFill，详情用 widthFix |
| lazy-load | 懒加载 | 列表页一定要开 |
| webp | webp 格式 | 能开就开，省流量 |
<!-- 列表页图片的最佳实践 -->
<image
src="{{item.cover}}"
mode="aspectFill"
lazy-load="{{true}}"
webp="{{true}}"
style="width: 200rpx; height: 200rpx;"
/>经验之谈： 图片一定要给固定宽高。如果不确定宽高比，用 mode="widthFix"，它会保持原图比例。我曾经因为没设宽高，导致页面重排了三次，用户体验极差。
4.4 scroll-view：滚动的艺术
scroll-view 是实现局部滚动的关键。注意，我说的是局部滚动，不是页面滚动。
我个人习惯是，能用页面滚动就不用 scroll-view。因为 scroll-view 在抖音小程序里有个老毛病：滚动穿透。就是你在 scroll-view 里滑到底部时，手指继续滑动会触发页面的滚动。
关键配置：
scroll-y：允许纵向滚动scroll-x：允许横向滚动bindscrolltolower：触底加载，分页必备enhanced：增强模式，iOS 上更流畅
<!-- 带触底加载的列表 -->
<scroll-view
scroll-y="{{true}}"
style="height: 100vh;"
bindscrolltolower="loadMore"
enhanced="{{true}}"
show-scrollbar="{{false}}"
>
<view wx:for="{{list}}" wx:key="id">
<!-- 列表项 -->
</view>
<view class="loading">加载中...</view>
</scroll-view>避坑指南： scroll-view 必须设置固定高度，否则不会滚动。我见过有人用百分比高度，结果页面死活不滚。正确的做法是用 style="height: calc(100vh - 100rpx)" 这样的计算方式。
4.5 swiper：轮播图的正确姿势
swiper 组件是抖音小程序里最常用的轮播组件。它支持自动播放、指示器、循环等特性。
我记得有一次做活动页面，轮播图在 Android 上卡得不行。排查后发现是图片太大，而且没有用 webp 格式。优化后流畅多了。
| 属性 | 默认值 | 推荐值 |
|---|---|---|
| autoplay | false | true |
| interval | 5000 | 3000 |
| duration | 500 | 300 |
| circular | false | true |
| indicator-dots | false | true |
<!-- 标准轮播图 -->
<swiper
autoplay="{{true}}"
interval="3000"
duration="300"
circular="{{true}}"
indicator-dots="{{true}}"
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#fff"
>
<swiper-item wx:for="{{banners}}" wx:key="id">
<image
src="{{item.url}}"
mode="aspectFill"
style="width: 100%; height: 400rpx;"
/>
</swiper-item>
</swiper>我的优化建议： 轮播图里的图片一定要用 webp 格式，并且尺寸不要超过 750px 宽。另外，indicator-color 和 indicator-active-color 可以自定义颜色，让指示器更符合你的设计风格。
4.6 实战：搭建一个信息流卡片
好了，理论说完了，咱们来点实际的。下面是一个信息流卡片的完整示例，用到了上面所有组件。
<!-- 信息流卡片组件 -->
<view class="feed-card" hover-class="card-hover">
<!-- 封面图 -->
<image
src="{{item.cover}}"
mode="aspectFill"
lazy-load="{{true}}"
webp="{{true}}"
style="width: 100%; height: 400rpx;"
/>
<!-- 标题 -->
<text class="title" user-select="{{false}}">{{item.title}}</text>
<!-- 标签轮播 -->
<swiper
autoplay="{{false}}"
circular="{{false}}"
style="height: 60rpx;"
>
<swiper-item wx:for="{{item.tags}}" wx:key="*this">
<text class="tag">{{item}}</text>
</swiper-item>
</swiper>
<!-- 底部信息 -->
<view class="footer">
<text class="author">{{item.author}}</text>
<text class="views">{{item.views}} 阅读</text>
</view>
</view>这个卡片里，view 负责布局，text 展示文字，image 加载封面，swiper 展示标签。你看，基础组件组合起来就能做出不错的效果。
最后说一句：基础组件虽然简单，但用好它们需要你对布局、性能、用户体验有深刻理解。别小看这些组件，抖音上那些日活千万的小程序，底层也都是这些东西。
下一章咱们聊聊表单组件，input、textarea、button 这些，到时候再分享一些我在实际项目中的踩坑经历。