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

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86415945

效果图

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界面布局设计入门到精通