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

微信小程序：选择页面单选实现（多页面均可选择）

news 来源：原创 2025/6/24 9:47:55

一、效果展示

1、主页面

展示了两个选择行

2、选择页面

根据传递的参数决定员工展示的数据，并且单选，可将数据传递给主页面

二、主页面实现

1、视图层

写入了采购员和库管员的行选择信息

<view class="item flex flex-between"><view class="item_title">采购员：</view><view class="item_info"><view class="pickertext" bind:tap="select_poperson"><text style="color: {{!poperson_sel ? '#8d8d8d' : ''}}">{{poperson_sel?poperson_sel.employee_name:'请选择'}}<text class="sel_btn">></text></text></view></view>
</view>
<view class="item flex flex-between"><view class="item_title">库管员：</view><view class="item_info"><view class="pickertext" bind:tap="select_warseperson"><text style="color: {{!warehouse_sel ? '#8d8d8d' : ''}}">{{warehouse_sel?warehouse_sel.employee_name:'请选择'}}<text class="sel_btn">></text></text></view></view>
</view>

2、逻辑层

(1)参数定义

在data中写入必要的参数(对应到视图层的数据)

data: {poperson_sel: '', //选择的采购员warehouse_sel: '', //选择的库管员
},

(2)处理选择页面返回的数据

执行方法，可得到返回的数据，并且根据数据进行赋值

//员工选择的数据展示
setSelectedEmployee(employee, field, source) {console.log('接收到字段:', field, '来源:', source, '员工信息:', employee);this.setData({[field]: employee});console.log(this.data.poperson_sel)
},

(3)处理视图层的点击事件

定义点击事件，如果有已经选择的需要获取其工号，并一并传递给选择页面

传递的参数：

sel_em_old：之前选择的数据

field：规定需要定义的字段(该字段决定视图层展示的内容)

source：规定传递的名称（其实不用可以省略，主要是区别不同的字段）

pageinfo：这个用于定义不同的请求数据，例如A查询的是员工1，员工2，员工3；但是B查询的数据是员工4，员工5，员工6。那么就需要用这个，主要写入后端

itemid：也是用于后端，主要是在有父级层面使用的

//选择采购员
select_poperson() {const poperson_sel = this.data.poperson_sel;const employee_num = poperson_sel?.employee_num;wx.navigateTo({url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=poperson_sel&source=popersond`});
},//选择库管员
select_warseperson() {const warehouse_sel = this.data.warehouse_sel;const employee_num = warehouse_sel?.employee_num;wx.navigateTo({url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=warehouse_sel&source=stock&pageinfo=add_emgroup&itemid=1`});
},

三、选择页面

1、视图层

(1)搜索栏

搜索栏使用input事件执行提交

<view class="top"><view class="search"><view class="search_in"><!-- 使用代码请更改图片路径 --><image src="{{search}}"></image><input type="text" placeholder="请输入工号" placeholder-style="color:#CCCCCC" bindinput="search" /></view></view>
</view>

(2)主要内容

如果行中checked为true，需要有一个选中效果：checked_parameter

<view class="center"><view class="pages_name"><view class="li"></view><view class="li2">员工信息</view></view>
</view>
<view class="all"><view class="item_all" data-id="{{item.id}}" wx:for="{{info}}" wx:key="index"><view class='position parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id="{{item.id}}" bindtap='select_single'><view class="content"><view class="vv_1">工号：<text>{{item.employee_num}}</text></view><view class="vv_1">姓名：<text>{{item.employee_name}}</text></view></view></view></view>
</view>

(3)翻页功能

如果数据过多需要用到翻页

<view class="pagination"><view class="page-button" bindtap="prevPage">上一页</view><view class="page-info">{{ page }}</view><view class="page-info">/</view><view class="page-info">{{ totalPage }}</view><view class="page-button" bindtap="nextPage">下一页</view>
</view>