body {background-color: #c3c3c3}

Uniapp 触底增加数据 相关表单提交数据

2.取消头部  
{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-0app"
				"navigationStyle": "custom"  //取消头部
			}
		},
flex布局

display: flex;
justify-content: space-around;

  

<template>
	<view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									当前选择
								</view>
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
								</view>
							</view>
						</view>
				<view class="uni-form-item uni-column">
					<view class="title">switch</view>
					<view>
						<switch name="switch" @change="switchchange" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">radio</view>
					 <view>
					    <radio-group v-model="selected" @change="radioChange">
					      <radio v-for="(option, index) in options" :key="index" :value="option.label">{{ option.label }}</radio>
					    </radio-group>
					  </view>
					<!-- <radio-group name="radio" >
						<label>
							<radio value="radio1" checked/><text>选项一</text>
						</label>
						<label>
							<radio value="radio2" /><text>选项二</text>
						</label>
					</radio-group> -->
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">checkbox</view>
					<checkbox-group name="checkbox">
						<label>
							<checkbox value="checkbox1" /><text>选项一</text>
						</label>
						<label>
							<checkbox value="checkbox2" /><text>选项二</text>
						</label>
					</checkbox-group>
				</view>

				<view class="uni-form-item uni-column">
					<view class="title">input</view>
					<input class="uni-input" name="input" v-model="index" placeholder="这是一个输入框" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
		{{All}}{{selected}}{{index}}
		<br /><br /><br /><br />
	</view>
</template>

<script>
	export default {
		name: "from",
		data() {
			return {
				 index: 0,
				All: {
					fromswitch: true,
					fromradio:'',
					selects:''
				},
				   array: ['中国', '美国', '巴西', '日本'],
				Alls:'',
				 selected: '',
				      options: [
				        { label: '选项1', value: '1' },
				        { label: '选项2', value: '2' },
				        { label: '选项3', value: '3' }
				      ]
			};
		},
		methods:{
			  bindPickerChange: function(e) {
			            console.log('picker发送选择改变,携带值为', e.detail.value)
			            this.index = e.detail.value
						  this.All.selects = e.detail.value
			        },
			switchchange(e){
				console.log(e)
			this.All.fromswitch= e.detail.value
			},
			radioChange(e){
				this.All.fromradio= e.detail.value
			},
			
		}
	}
</script>

  

posted @ 2023-12-06 12:59  最美胡萝卜  阅读(74)  评论(0)    收藏  举报
body {background-color: #c3c3c3}