更新记录
1.0.3(2024-06-06)
下载此版本
支持vue3
1.0.2(2024-06-06)
下载此版本
修正选择异常问题
1.0.1(2023-03-22)
下载此版本
修改多选赋值问题,引入uni-icons
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
14.0.2 |
× |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
Select组件
配置参数
属性 |
说明 |
multiple |
是否多选 |
options |
数据列表 |
placeholder |
无选项值 |
slabel |
options键值对关系 |
svalue |
options键值对关系 |
filterable |
是否可搜索 |
remoteMethod |
远程调用方法 |
height |
面板高度 |
事件
组件使用
<template>
<view class="content">
单选:{{select1}}
<qy-select v-model="select1" :options="data"></qy-select>
单选:{{select2}}
<qy-select v-model="select2" :options="data" filterable></qy-select>
单选分页:{{select3}}
<qy-select v-model="select3" :options="data" :remoteMethod="remoteMethod" filterable remote></qy-select>
多选:{{muiSelect}}
<qy-select v-model="muiSelect" :options="data" multiple></qy-select>
<view class="bottom">
底部:{{select4}}
<qy-select v-model="select4" :options="data"></qy-select>
</view>
</view>
</template>
<script>
import QySelect from '../../components/qiyan-select/qiyan-select'
export default {
components: {
QySelect
},
data() {
return {
select1: '',
select2: '',
select3: '',
select4: '',
muiSelect: [],
data: []
}
},
onLoad() {
uni.showLoading({
title: '加载中'
});
setTimeout(() => {
for (let i = 1; i <= 10; i++) {
this.data.push({
label: "选项" + i,
value: i
});
}
uni.hideLoading();
}, 3000)
},
methods: {
remoteMethod(params) {
let page = params.page;
console.log(page);
return new Promise(resolve => {
for (let i = (page - 1) * 10 + 1; i <= page * 10; i++) {
this.data.push({
label: "选项" + i,
value: i
});
}
resolve({ success:true, noMore:false });
})
}
}
}
</script>
<style scoped>
.content {
padding: 0 10px;
}
.bottom {
position: fixed;
bottom: 100px;
width: calc(100% - 20px);
/* padding: 0 10px; */
}
</style>
说明
此插件依赖uni-scss\uni-icons\uni-load-more,请务必安装!!!