小程序学习-02

小程序组件

表单组件

【注】原生小程序中下拉框数据需要回写

<view class="content">
	<form bindsubmit="formsubmit">
		<view class="input">
			姓名
			<input class="input-name" name="customerName" />
		</view>
		<view class="input">
			年龄
			<input class="input-age" name="customerAge" />
		</view>
		<view class="input">
			<radio-group name="customerSex">
				<radio value='0' checked="true">男</radio>
				<radio value='1'>女</radio>
			</radio-group>
		</view>
		<view class="input">
			血型
			<input class="input-text" name="bloodType" />
		</view>
		<view class="input">
			身份证
			<input class="input-text" name="idcard" />
		</view>
		<view class="input">
			身高(cm)
			<input class="input-text" name="height" />
		</view>
		<view class="input">
			体重(kg)
			<input class="input-text" name="weight" />
		</view>
		<view class="input">出生日期
			<picker
			 mode="date"
			 value="{{birthday}}"
			 bindchange="bindDateChange"
			 name="birthday"
			>
				<view class="input-birth">
					{{birthday}}
				</view>
			</picker>
		</view>
		<view class="input">
			兴趣爱好:
			<picker
			 range="{{hobbys}}"
			 bindchange="changeHobbySel"
			 name="hobby"
			>
				<view class="input-hobby">
					{{hobbysel}}
				</view>
			</picker>
		</view>
		<view class="attention-input">
			注意事项
			<textarea
			 name="attention"
			 placeholder=""
			 cols="30"
			 rows="30"
			 class="text-input"
			></textarea>
		</view>

		<view class="btn">
			<button type="primary" form-type="submit">提交</button>
		</view>
	</form>

</view>

js内容：

const pageOptions = {
  // 页面数据
  data: {
    isFirstOnShow: true, // 是否为首次执行onShow
    hobbysel:'',
    birthday:'',
    hobbys:['唱歌','篮球','游泳','溜冰']
  },
  // 页面载入时
  onLoad(e) {
    this.init(e)
  },
  // 页面初始化
  init(e) {},
  // 页面准备好时
  onReady() {},
  // 页面显示时
  onShow() {
    const { isFirstOnShow } = this.data

    if (isFirstOnShow) {
      // 首次执行时
      this.setData({
        isFirstOnShow: false,
      })
      return
    }
  },
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      birthday: e.detail.value
    })
  },
  changeHobbySel:function(e){
    var selContent=this.data.hobbys[e.detail.value]
    console.log(selContent)
    //修改data中的值，不能直接改
    this.setData({
      hobbysel:selContent
    })
},
formsubmit:function(e){
  console.log(e.detail.value)
},
  // 页面隐藏时
  onHide() {},
  // 页面卸载时
  onUnload() {},
  // 下拉页面时
  onPullDownRefresh() {},
  // 到达页面底部时
  onReachBottom() {},
  // 页面滚动时
  onPageScroll() {},
  // 分享时，注：onShareAppMessage不能为async异步函数，会导致不能及时取得返回值，使得分享设置无效
  onShareAppMessage() {
    /* const title = ''
    const path = ''
    const imageUrl = ``

    return {
      title,
      path,
      imageUrl,
    } */
  },
}

Page(pageOptions)