1. 基础 Cells：
<view class="weui-cells">
<!-- 第一个 Cell -->
<view class="weui-cell">
<view class="weui-cell__hd"><text class="weui-label">标题1</text></view>
<view class="weui-cell__bd">内容1</view>
<view class="weui-cell__ft">说明1</view>
</view>
<!-- 第二个 Cell -->
<view class="weui-cell">
<view class="weui-cell__hd"><text class="weui-label">标题2</text></view>
<view class="weui-cell__bd">内容2</view>
<view class="weui-cell__ft">说明2</view>
</view>
<!-- 其他 Cells... -->
</view>
2. 带链接的 Cells：
<view class="weui-cells">
<navigator url="/pages/detail/detail">
<view class="weui-cell weui-cell_access">
<view class="weui-cell__hd"><text class="weui-label">带链接的标题</text></view>
<view class="weui-cell__bd">内容</view>
<view class="weui-cell__ft">说明文字</view>
</view>
</navigator>
<!-- 其他 Cells... -->
</view>
在上述示例中，使用了 navigator 组件实现了点击后跳转到 /pages/detail/detail 页面的效果。
3. 带图标的 Cells：
<view class="weui-cells">
<view class="weui-cell weui-cell_access">
<view class="weui-cell__hd">
<image src="/images/icon.png" style="width: 20px; height: 20px; margin-right: 5px;"></image>
</view>
<view class="weui-cell__bd">带图标的标题</view>
<view class="weui-cell__ft">说明文字</view>
</view>
<!-- 其他 Cells... -->
</view>
在上述示例中，通过 image 标签引入了一个图标，并在 weui-cell__hd 中显示。
4. 带说明信息的 Cells：
<view class="weui-cells">
<view class="weui-cell weui-cell_access">
<view class="weui-cell__bd">带说明的标题</view>
<view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
</view>
<!-- 其他 Cells... -->
</view>
在上述示例中，通过在 weui-cell__ft 上添加 weui-cell__ft_in-access 类，将说明文字放置在右侧。
这是一些 WeUI Cells 组件的简单用法示例。你可以根据实际需求和 WeUI 的文档进一步定制和使用不同类型的 Cells，以构建符合设计风格的小程序列表。
转载请注明出处：http://www.zyzy.cn/article/detail/1329/微信小程序