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

问题背景

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

问题分析

话不多说，先上效果图。

问题解决

完整代码如下： （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>
  <button class="btnItem" type="primary">确认</button>
</scroll-view>

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

.outLayer{
  margin:40rpx;
  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;
}

.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;
}

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

问题总结

本文介绍了如何在微信小程序开发中，实现一般的表单页面，有兴趣的同学可以进一步深入研究。