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

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

### 效果图 ###

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

> wxml代码

<view class="page">
    
      <view class="page__hd">
    
        <view class="page__title">Preview</view>
    
        <view class="page__desc">表单预览</view>
    
      </view>
    
      <view class="page__bd">
    
        <view class="weui-form-preview">
    
          <view class="weui-form-preview__hd">
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">付款金额</view>
    
              <view class="weui-form-preview__value_in-hd">¥2400.00</view>
    
            </view>
    
          </view>
    
          <view class="weui-form-preview__bd">
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">商品</view>
    
              <view class="weui-form-preview__value">电动打蛋机</view>
    
            </view>
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">标题标题</view>
    
              <view class="weui-form-preview__value">名字名字名字</view>
    
            </view>
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">标题标题</view>
    
              <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>
    
            </view>
    
          </view>
    
          <view class="weui-form-preview__ft">
    
            <navigator url="" class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator>
    
          </view>
    
        </view>
    
        <view class="weui-form-preview">
    
          <view class="weui-form-preview__hd">
    
            <view class="weui-form-preview__label">付款金额</view>
    
            <view class="weui-form-preview__value_in-hd">¥2400.00</view>
    
          </view>
    
          <view class="weui-form-preview__bd">
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">商品</view>
    
              <view class="weui-form-preview__value">电动打蛋机</view>
    
            </view>
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">标题标题</view>
    
              <view class="weui-form-preview__value">名字名字名字</view>
    
            </view>
    
            <view class="weui-form-preview__item">
    
              <view class="weui-form-preview__label">标题标题</view>
    
              <view class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</view>
    
            </view>
    
          </view>
    
          <view class="weui-form-preview__ft">
    
            <navigator class="weui-form-preview__btn weui-form-preview__btn_default" hover-class="weui-form-preview__btn_active">辅助操作</navigator>
    
            <navigator class="weui-form-preview__btn weui-form-preview__btn_primary" hover-class="weui-form-preview__btn_active">操作</navigator>
    
          </view>
    
        </view>
    
      </view>
    
    </view>

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

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui_-WeUi_-preview]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3f517f5017054dc3b10a1684cb020cfc.png
[weui_-WeUi_-preview 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f57f72e6b90a4b6894e634e1347e44ee.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[-WeUI 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5f51853769c6470a8739c30aa581cfb9.png