uniapp使用穿梭框
时间: 2024-07-24 19:01:49 浏览: 83
uniapp字体图标的使用
UniApp是一款基于Vue.js的跨平台应用开发框架,它允许开发者编写一套代码,生成兼容iOS、Android、Web等多端的应用。其中,穿梭框(Picker)是一种常见的输入组件,用于从预设选项列表中选择一个或多个值,常用于日期选择、时间选择、分类选择等场景。
在UniApp中,你可以通过`<picker>`标签来创建穿梭框。下面是一个简单的例子:
```html
<template>
<view>
<uni-picker v-model="selectedValue" :range="{{ option }}" placeholder="请选择">
<view slot="top">年份</view>
<view slot="bottom">月份</view>
</uni-picker>
</view>
</template>
<script>
export default {
data() {
return {
selectedValue: [],
option: [
{ label: '2022', value: '2022' },
{ label: '2021', value: '2021' }, // 年份数据
{ label: '1月', value: '01' },
{ label: '2月', value: '02' }, // 月份数据
... // 更多数据项
]
};
}
};
</script>
```
在这个例子中,`v-model`绑定到数组`selectedValue`来保存用户的选择,而`option`是一个二维数组,表示年份和月份的组合。`placeholder`属性则设置了默认提示信息。
阅读全文