当前位置：首页 > news >正文

【uniapp开发】picker组件的使用

news 来源：原创 2025/6/6 18:37:48

项目uniapp，结合fastadmin后端开发

picker组件的官方文档说明

https://en.uniapp.dcloud.io/component/picker.html#普通选择器

先看效果：

1、实现设备类型的筛选；2、实现设备状态的筛选；

前端代码（节选）

<template><view class="camera-list-container"><!-- 搜索栏 --><view class="search-bar"><uni-search-bar v-model="keyword" @confirm="search"></uni-search-bar></view><!-- 筛选栏 --><view class="filter-bar"><!-- 分类筛选 --><view class="filter-item"><picker:range="typeList"range-key="name":value="selectedTypeIndex"@change="handleTypeChange"mode="selector"><view class="uni-input">{{ typeList[selectedTypeIndex].name }}<uni-icons type="down" size="24" class="picker-icon"></uni-icons></view></picker></view><!-- 状态筛选 --><view class="filter-item"><picker:range="statusList"range-key="name":value="selectedStatusIndex"@change="handleStatusChange"mode="selector"><view class="uni-input">{{ statusList[selectedStatusIndex].name }}<uni-icons type="down" size="24" class="picker-icon"></uni-icons></view></picker></view></view><!-- 相机列表 --><view class="camera-items"><view class="camera-item" v-for="(item, index) in cameraList" :key="index"><view class="camera-img-container"><image :src="item.image || 'https://3f.gde.cc/uploads/20250527/83e99b5e7f4979dc4868aed335fa265d.jpg'" mode="aspectFill" class="camera-img"></image></view><view class="camera-info"><text class="name">{{ item.name }}</text><text class="name">可借数量：{{item.stock}}</text><text class="price">¥{{ item.rent_price }}/天</text><text class="status" :class="item.stock > 0 ? 'available' : 'unavailable'">{{ item.status_zh }}</text></view><view class="checkbox-container"><uni-number-box :min="0" :max="(item.stock)" :value="selectedQuantities.get(item.id) || 0"@change="handleQuantityChange(item, $event)":disabled="item.stock <= 0"></uni-number-box></view></view></view><!-- 加载更多 --><uni-load-more :status="loadStatus" @clickload="loadMore"></uni-load-more><!-- 底部租用工具栏 --><view v-if="totalSelectedQuantity > 0" class="bottom-toolbar"><view class="toolbar-left"><text>已选 {{ totalSelectedQuantity }} 台设备</text><text class="total-price">总计: ¥{{ totalPrice }}/天</text></view><view class="toolbar-right" @click="rentSelectedDevices"><text>立即预约</text></view></view></view>
</template><script setup>
import { ref, computed, onMounted, watch } from 'vue'
import request from '@/utils/http.js'
import request2 from '@/utils/http2.js'const keyword = ref('')
const selectType = ref({ id: 0, name: '产品分类' })
const selectStatus = ref({ id: '', name: '设备状态' })
const page = ref(1)
const cameraList = ref([])
const loadStatus = ref('loading')// 新增：选中项索引
const selectedTypeIndex = ref(0); // 初始全部分类
const selectedStatusIndex = ref(0); // 初始全部状态// 筛选数据
const typeList = ref([])const statusList = ref([])// 修改筛选事件处理
const handleTypeChange = (e) => {selectedTypeIndex.value = e.detail.value;fetchCameraList(true); // 切换分类时刷新列表
};const handleStatusChange = (e) => {selectedStatusIndex.value = e.detail.value;fetchCameraList(true); // 切换状态时刷新列表
};// 获取相机列表
const fetchCameraList = async (isRefresh = false) => {if (isRefresh) {page.value = 1cameraList.value = []selectedQuantities.value.clear() // 刷新时清空选中数量}try {const res = await request2({url: '/api/ffep/device/index',method: 'POST',data:{keyword: keyword.value,type: typeList.value[selectedTypeIndex.value].id, // 使用value作为参数status: statusList.value[selectedStatusIndex.value].id, // 使用value作为参数}})if (res.code) {cameraList.value = [...cameraList.value, ...res.data.list]page.value++loadStatus.value = res.data.list.length < res.data.pageSize ? 'noMore' : 'loading'} else {uni.showToast({ title: res.msg || '获取失败', icon: 'none' })loadStatus.value = 'error'}} catch (error) {uni.showToast({ title: '网络错误', icon: 'none' })loadStatus.value = 'error'}
}// 页面初始化
onMounted(() => {request2({url: '/api/ffep/device/init',method: 'POST',}).then(res=>{typeList.value = [{id:0,name:'全部类型'},...res.data.typeList]statusList.value = [{id:0,name:'全部状态'},...res.data.statusList] fetchCameraList()})uni.setNavigationBarTitle({title:'IT设备借用/领用/归还'})
})</script>

画几个重点：

1、如果数据源是二维数组，需要指定标签的名称；

2、如果接口没有默认选项，要补一个

3、事件改变

后端处理：

1、picker需要的数据接口

    public function init(){$typelist = CategoryModel::field('id,name')->select();$statuslist = (new ApplyModel())->getStatusList();foreach ($statuslist as $key=>$val){$statusList[] = ['id'=>$key,'name'=>$val];}return $this->success('ok',['typeList'=>$typelist,'statusList' => $statusList,]);}

返回的数据格式：