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

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

效果图

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

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

wxml代码

  1. <view class="page">
  3.   <view class="page__hd">
  5.     <view class="page__title">List</view>
  7.     <view class="page__desc">列表</view>
  9.   </view>
  11.   <view class="page__bd">
  13.     <view class="weui-cells__title">带说明的列表项</view>
  15.     <view class="weui-cells weui-cells_after-title">
  17.       <view class="weui-cell">
  19.         <view class="weui-cell__bd">标题文字</view>
  21.         <view class="weui-cell__ft">说明文字</view>
  23.       </view>
  25.     </view>
  29.     <view class="weui-cells__title">带图标、说明的列表项</view>
  31.     <view class="weui-cells weui-cells_after-title">
  33.       <view class="weui-cell">
  35.         <view class="weui-cell__hd">
  37.           <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  39.         </view>
  41.         <view class="weui-cell__bd">标题文字</view>
  43.         <view class="weui-cell__ft">说明文字</view>
  45.       </view>
  47.       <view class="weui-cell">
  49.         <view class="weui-cell__hd">
  51.           <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  53.         </view>
  55.         <view class="weui-cell__bd">标题文字</view>
  57.         <view class="weui-cell__ft">说明文字</view>
  59.       </view>
  61.     </view>
  65.     <view class="weui-cells__title">带跳转的列表项</view>
  67.     <view class="weui-cells weui-cells_after-title">
  69.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  71.         <view class="weui-cell__bd">cell standard</view>
  73.         <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  75.       </navigator>
  77.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  79.         <view class="weui-cell__bd">cell standard</view>
  81.         <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  83.       </navigator>
  85.     </view>
  89.     <view class="weui-cells__title">带说明、跳转的列表项</view>
  91.     <view class="weui-cells weui-cells_after-title">
  93.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  95.         <view class="weui-cell__bd">cell standard</view>
  97.         <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
  99.       </navigator>
  101.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  103.         <view class="weui-cell__bd">cell standard</view>
  105.         <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
  107.       </navigator>
  109.     </view>
  113.     <view class="weui-cells__title">带图标、说明、跳转的列表项</view>
  115.     <view class="weui-cells weui-cells_after-title">
  117.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  119.         <view class="weui-cell__hd">
  121.           <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  123.         </view>
  125.         <view class="weui-cell__bd">cell standard</view>
  127.         <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
  129.       </navigator>
  131.       <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  133.         <view class="weui-cell__hd">
  135.           <image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  137.         </view>
  139.         <view class="weui-cell__bd">cell standard</view>
  141.         <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
  143.       </navigator>
  145.     </view>
  147.   </view>
  149. </view>

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

发表评论

表情：
评论列表 （有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读