vant的下拉菜单
van-dropdown-menu
这个问题主要是:
- 所有的下拉列表都在通过一个van-dropdown-menu 这个容器中
- option属性是固定的,不能自定义
- 没有单独的标题,不想pc端那样,有个placeholder
<van-dropdown-menu>
<van-dropdown-item
v-model="paramsObj.params.status"
:options="listDataObject.runListData"
@change="changeDropDown"
/>
<van-dropdown-item
v-model="paramsObj.params.jtype"
:options="listDataObject.taskTypeArr"
@change="changeDropJtype"
/>
<van-dropdown-item
v-model="paramsObj.params.owner"
:options="listDataObject.ownerList"
@change="changeDropOwner"
/>
<van-dropdown-item
v-model="paramsObj.params.cluster"
:options="listDataObject.clusterArr"
@change="changeDropCluster"
/>
</van-dropdown-menu>
vant下拉刷新上提加载
其实是list+下拉刷新的组合
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
paramsObj.params.page = paramsObj.params.page + 1;
if (refreshing.value) {
taskListMessage.taskListArr = [];
refreshing.value = false;
}
getTaskList();
loading.value = false;
};
const onRefresh = () => {
finished.value = false;
paramsObj.params.page = 0
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
loading.value = true;
onLoad();
};
vant选择器
vant4.0+vue3.0 实现van-picker 初始化时默认选中指定选项
[图片]
vant4和 vant3的区别:
vant3.0 实现选中默认选项 defaultIndex
直接配置这个属性就可以
vant4.0 取消了这个属性,用的是这个方法:
const selectedValues = ref(['Wenzhou']) 这个selectedValues 的值必须是数组 必须是v-model这种写法,不能改成:value最终实现代码:
<van-picker
:columns-field-names="{ text: 'projectName', value: 'projectId' }"
cancel-button-text=""
:columns="listDataObject.projectListArr"
@confirm="onConfirmProject"
v-model="listDataObject.selectedValue"
/>
onMounted(async () => {
listDataObject.selectedValue[0] = myLocalStorage.getItem("projectMessage").projectId
});