微信小程序开发实战——实现表单页面_微信小程序表单布局

微信小程序开发实战——实现表单页面

问题背景

本文将介绍如何在微信小程序开发中，实现一般的表单页面。

问题分析

话不多说，先上效果图，主要包括基本的表单item、列表框选择数据、选择本地图片等功能。

问题解决

完整代码如下：
（1）index.wxml文件，代码如下：

<scroll-view class="scroll-view_H" scroll-y="true">
  <view class="outLayer">
    <View class="lineItemFirst">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系人:
        </View>
      </View>

      <input class="inputItem" placeholder="请输入联系人"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系电话:
        </View>
      </View>

      <input class="inputItem" placeholder="请输入联系方式"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          固定电话:
        </View>
      </View>
      <input class="inputItem" placeholder="请输入固定电话"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          服务类型:
        </View>
      </View>
      <picker class="picker" bindchange="pickerChange" range="{{arr}}">
        <view>
          {{arr[index]}}
        </view>
      </picker>
      <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          服务事项:
        </View>
      </View>
      <picker class="picker" bindchange="pickerChange" range="{{arr}}">
        <view>
          {{arr[index]}}
        </view>
      </picker>
      <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系人邮箱:
        </View>
      </View>
      <input class="inputItem" placeholder="请输入联系人邮箱"></input>
    </View>

    <View class="colItem">
      <View class="kindInfoQuestion">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          问题简述:
        </View>
      </View>
      <input class="inputItemBig" placeholder="请输入问题详情"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          选择附件
        </View>
      </View>
      <button class="btnChooseFile" bindtap="onChooseFile">选择图片</button>
    </View>
  </view>

  <View class="fileItem" wx:if="{{hasFile}}">
      <View class="fileKindInfo">
        <View class="fileInfo">
          选择的文件路径:
        </View>
        <View class="fileNameItem">
          {{path}}
        </View>
      </View>
    </View>

  <button class="btnItem" type="primary">确认</button>
</scroll-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
114
115
116
117
118
119
120
121
122
123
124

（2）index.wxss文件，代码如下：

.outLayer{
  margin:10rpx;
  display:flex;
  flex-direction: column;
  background: rgb(153, 149, 149);
  /* border-top: 3rpx solid lightgrey; */
}

.lineItemFirst{
  margin-top:25rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.lineItem{
  margin-top:3rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.kindInfo{
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.fileKindInfo{
  height: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ringItem{
  height: 70rpx;
  color: red;
}

.KindItem{
  height: 70rpx;
  font-size: smaller;
}

.kindInfoQuestion{
  margin-top: 15rpx;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.inputItem{
  height: 70rpx;
  font-size: smaller;
  width: 70%;
  text-align: center;
}

.inputItemBig{
  margin-top: 10rpx;
  font-size: smaller;
}

.picker{
  height: 40rpx;
  font-size: smaller;
  width: 70%;
  text-align: center;
}

.colItem{
  margin-top:30rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.scroll-view_H {
 /*设置display:flex无效*/
 height: 100vh;
 padding-bottom: 150rpx;
}

.selectImg{
  width: 25rpx;
  height: 25rpx;
}

.btnChooseFile{
  height: 70rpx;
  width: 30rpx;
  font-size: x-small;
}

.btnItem{
  margin: 30rpx;
  margin-bottom: 50rpx;
}

.fileItem{
  margin-top:3rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.fileInfo{
  height: 40rpx;
  display: flex;
  width: 30%;
  flex-direction: row;
  justify-content: flex-start;
}

.fileNameItem{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 70rpx;
  font-size: smaller;
}
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

（3）index.js文件，代码如下：

// pages/pubu/pubu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    publishInfoList: [],
    arr:['体适能','足球','篮球','乒乓球'],
    index:0,
    path:"",
    hasFile: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let f = this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?location=beij&key=d4a619bfe3244190bfa84bb468c14316',
      success(res) {
        if (res.statusCode == 200) {
          var allList = res.data.location
          f.setData({
            publishInfoList: allList
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  submitInfo(e) {
    this.setData({
        formId: e.detail.formId,
      },
      (res) => {})
  },

  pickerChange(value) {
    console.log(value)
    this.setData({
      index:value.detail.value
    })
  },

  /**
   * 选择图片
   */
  onChooseFile() {
    wx.chooseImage({
      success:(resp)=>{
        let imgPath=resp.tempFilePaths;
        console.log(imgPath);
        this.setData({path: imgPath, hasFile: true});
      }
    })
  }
})
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

问题总结

本文介绍了如何在微信小程序开发中，实现一般的表单页面,包括普通列表项、列表选择框、图片选择器等，有兴趣的同学可以进一步深入研究。