“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article was about listening for scroll events to control page changes; Today we will learn how to use forms in wechat applet using uni-App form component.

Text entry field

Text input fields, whether single or multi-line, are much like native tags, but have many attributes, unlike native input and Textarea.

A single-line text input boxinput

Native input is not only an input box, but also radio, checkbox, time, date, and file selection. Uni-app is just an input box, other functions uni-App has separate components.

<view class="uni-form-item uni-column"> <view class="title"> <input V-model ="userName" class="uni-input" /> </view>Copy the code

Multi-line text input boxtextarea

Note: The textarea blur event is later than the tap event on the page. If you want to retrieve the Textarea from the button’s click event, use @submit on the form

<view class="uni-form-item uni-column"> <view class="title"> :name="item.name" :placeholder=" '" :auto height="false"/> </view>Copy the code

Radio radio

The value of the check attribute is true, so I used the condition that the index value of the array is equal, and I used the default value of the index value is 0. You then need to update the selected value with the change event. Since uni-App radio has no V-Model attribute, the value required by the background is also obtained from the change event. The value binding in radio sets whether the value of ID or name is returned in the change event.

<view class="uni-form-item uni-column"> <view class="title"> <radio-group :name="radioName" @change="radioChange"> <label V -for="(subItem,index) in items" :key="index"> <radio :value="subItem ". Id ":checked="index==current" /> <text>{{subitem. name}}</text> </label> </radio-group> </view> [/ / {id: 1, name: 'apple'}, / / {id: 2, name: 'banana'}, / / {id: 3, name: 'mango}, / / {id: 4, name: RadioChange: function(evt) {console.log(evt.detail.value,"value"); //1 2 3 4 for (let i = 0; i < this.items.length; i++) { if (this.items[i].id === evt.detail.value.id) { this.current = i; break; }}},Copy the code

Results the following

Checkboxes checkbox

Checkbox’s properties are almost the same as radio’s. Check whether the value returned by the change event contains the value of the items iterated through. If yes, add the checked property and set it to true; otherwise, set it to false.

<view class="uni-form-item uni-column"> <view class="title"> </view> <checkbox-group :name="checkboxName" @change="checkboxChange"> <label v-for="(subItem,index) in items" :key="subItem.id"> <checkbox :value="subItem.name" :checked=" subitem.checked "/> <text>{{subitem.name}}</text> </label> </checkbox-group> </view> JS code data is the same as above checkboxChange (e) { var items = this.items, values = e.detail.value; for (var i = 0, lenI = items.length; i < lenI; ++i) { const item = items[i] if(values.includes(item.value)){ this.$set(item,'checked',true) }else{ this.$set(item,'checked',false) } } },Copy the code

Results the following

A drop-down boxpicker

Value cannot set the value returned by the @change event as checkboxes and singboxes do. The change event of the picker component returns the index of the array. The value displayed by input is matched by the subscript value of the returned array. The most important thing here is that the data structure of the array object, the thing that controls the pull-down filter is not the value key but the range key.

<view class="uni-form-item uni-column"> <view class="title"> dropdown </view> < picker@change ="onSelectChange" <input class="uni-input" :name="pickerName" :placeholder=" 'please select the type'" :value="items[pickerData]. Name ":disabled="true"/> </picker> </view> JS code data same as above onSelectChange: Function (e) {console.log('value', e.target.value) // Array subscript this.pickerData = e.target.value},Copy the code

Results the following

Conclusion:

At first I used uni-app to write the applet, I mostly used vue syntax to write it, boy, the browser can preview the page, when it comes to wechat applet, the code can’t run. Because you can’t use vue syntax to write a small program, you must use the syntax of wechat small program to write. Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article will be helpful to you and I hope you can support me more. Today is the 22nd day of my participation in the first Wenwen Challenge 2022. Come on! Persistence is victory.