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>

浙公网安备 33010602011771号