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

效果图

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

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