微信小程序weui在线入门教程-WeUi基础组件-preview表单预览

女爷i 2024-02-19 15:49 127阅读 0赞

效果图

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

wxml代码

  1. <view class="page">
  3.   <view class="page__hd">
  5.     <view class="page__title">Preview</view>
  7.     <view class="page__desc">表单预览</view>
  9.   </view>
  11.   <view class="page__bd">
  13.     <view class="weui-form-preview">
  15.       <view class="weui-form-preview__hd">
  17.         <view class="weui-form-preview__item">
  19.           <view class="weui-form-preview__label">付款金额</view>
  21.           <view class="weui-form-preview__value_in-hd">¥2400.00</view>
  23.         </view>
  25.       </view>
  27.       <view class="weui-form-preview__bd">
  29.         <view class="weui-form-preview__item">
  31.           <view class="weui-form-preview__label">商品</view>
  33.           <view class="weui-form-preview__value">电动打蛋机</view>
  35.         </view>
  37.         <view class="weui-form-preview__item">
  39.           <view class="weui-form-preview__label">标题标题</view>
  41.           <view class="weui-form-preview__value">名字名字名字</view>
  43.         </view>
  45.         <view class="weui-form-preview__item">
  47.           <view class="weui-form-preview__label">标题标题</view>
  49.           <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>
  51.         </view>
  53.       </view>
  55.       <view class="weui-form-preview__ft">
  57.         <navigator url="" class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator>
  59.       </view>
  61.     </view>
  63.     <view class="weui-form-preview">
  65.       <view class="weui-form-preview__hd">
  67.         <view class="weui-form-preview__label">付款金额</view>
  69.         <view class="weui-form-preview__value_in-hd">¥2400.00</view>
  71.       </view>
  73.       <view class="weui-form-preview__bd">
  75.         <view class="weui-form-preview__item">
  77.           <view class="weui-form-preview__label">商品</view>
  79.           <view class="weui-form-preview__value">电动打蛋机</view>
  81.         </view>
  83.         <view class="weui-form-preview__item">
  85.           <view class="weui-form-preview__label">标题标题</view>
  87.           <view class="weui-form-preview__value">名字名字名字</view>
  89.         </view>
  91.         <view class="weui-form-preview__item">
  93.           <view class="weui-form-preview__label">标题标题</view>
  95.           <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>
  97.         </view>
  99.       </view>
  101.       <view class="weui-form-preview__ft">
  103.         <navigator class="weui-form-preview__btn weui-form-preview__btn_default" hover-class="weui-form-preview__btn_active">辅助操作</navigator>
  105.         <navigator class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator>
  107.       </view>
  109.     </view>
  111.   </view>
  113. </view>

欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通

微信小程序-WeUI界面布局设计入门到精通

发表评论

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

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

相关阅读