微信小程序weui在线入门教程-WeUi表单组件-list列表

逃离我推掉我的手 2024-02-19 15:49 47阅读 0赞

### 效果图 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![微信小程序weui在线入门教程-WeUi表单组件-list列表][weui_-WeUi_-list]

![微信小程序weui在线入门教程-WeUi表单组件-list列表][weui_-WeUi_-list 1]

> wxml代码

<view class="page">
    
      <view class="page__hd">
    
        <view class="page__title">List</view>
    
        <view class="page__desc">列表</view>
    
      </view>
    
      <view class="page__bd">
    
        <view class="weui-cells__title">带说明的列表项</view>
    
        <view class="weui-cells weui-cells_after-title">
    
          <view class="weui-cell">
    
            <view class="weui-cell__bd">标题文字</view>
    
            <view class="weui-cell__ft">说明文字</view>
    
          </view>
    
        </view>
    
     
    
        <view class="weui-cells__title">带图标、说明的列表项</view>
    
        <view class="weui-cells weui-cells_after-title">
    
          <view class="weui-cell">
    
            <view class="weui-cell__hd">
    
              <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
    
            </view>
    
            <view class="weui-cell__bd">标题文字</view>
    
            <view class="weui-cell__ft">说明文字</view>
    
          </view>
    
          <view class="weui-cell">
    
            <view class="weui-cell__hd">
    
              <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
    
            </view>
    
            <view class="weui-cell__bd">标题文字</view>
    
            <view class="weui-cell__ft">说明文字</view>
    
          </view>
    
        </view>
    
     
    
        <view class="weui-cells__title">带跳转的列表项</view>
    
        <view class="weui-cells weui-cells_after-title">
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    
          </navigator>
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    
          </navigator>
    
        </view>
    
     
    
        <view class="weui-cells__title">带说明、跳转的列表项</view>
    
        <view class="weui-cells weui-cells_after-title">
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
    
          </navigator>
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
    
          </navigator>
    
        </view>
    
     
    
        <view class="weui-cells__title">带图标、说明、跳转的列表项</view>
    
        <view class="weui-cells weui-cells_after-title">
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__hd">
    
              <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
    
            </view>
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
    
          </navigator>
    
          <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    
            <view class="weui-cell__hd">
    
              <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
    
            </view>
    
            <view class="weui-cell__bd">cell standard</view>
    
            <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
    
          </navigator>
    
        </view>
    
      </view>
    
    </view>

[欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通][-WeUI]  
![微信小程序weui在线入门教程-WeUi表单组件-list列表][weui_-WeUi_-list 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui_-WeUi_-list]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3e77f7fa79fd49e0ad0c7863563c39b5.png
[weui_-WeUi_-list 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fae4e0b6bf384eb8a3c9ab063c2ad756.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[weui_-WeUi_-list 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3455824d401e4993acc6f21aa1a32b73.png