微信小程序:选择页面单选实现(多页面均可选择)

一、效果展示

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>

(4)确认按钮

<view class="button_sure" bindtap=

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/85967.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/85967.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用docker-compose搭建redis-cluster集群

前言 如果你也因为centos的gcc版本落后导致redis编译安装不通过而烦恼&#xff0c;大可以试一试用docker去搭建redis集群。本文以单节点搭建redis-cluster三主三从为例。 ip&#xff1a;192.168.0.10redis信息&#xff1a; 客户端连接端口&#xff1a;7001 -7006集群间通信端…

【LLaMA-Factory 实战系列】二、WebUI 篇 - Qwen2.5-VL 多模态模型 LoRA 微调保姆级教程

【LLaMA-Factory 实战系列】二、WebUI 篇 - Qwen2.5-VL 多模态模型 LoRA 微调保姆级教程 1. 引言1.1 为什么选择 Qwen2.5-VL-3B-Instruct&#xff1f;1.2 环境要求 2. 环境搭建2.1 安装 LLaMA-Factory2.2 验证安装 3. 数据集准备与配置3.1 数据集结构3.2 数据格式3.3 数据集声明…

风险矩阵与灰色综合评价

一、风险矩阵&#xff08;Risk Matrix&#xff09; 1. 定义与原理 定义&#xff1a;风险矩阵是一种通过二维网格&#xff08;可能性 vs. 后果严重程度&#xff09;可视化展示风险等级的工具&#xff0c;用于优先级排序和决策支持。核心要素&#xff1a; 横轴&#xff08;X轴&…

谷歌浏览器电脑版官方下载- Google Chrome官方网页版入口

谷歌浏览器&#xff08;Google Chrome&#xff09;是一款由谷歌公司开发的免费网页浏览器&#xff0c;自2008年首次发布以来&#xff0c;迅速成为全球最受欢迎的浏览器之一。它以简洁的界面设计、快速的浏览速度和强大的安全性能而闻名。谷歌浏览器支持多种操作系统&#xff0c…

垂直电商供应链平台:重构产业生态,驱动数字化增长

垂直电商供应链平台&#xff1a;重构产业生态&#xff0c;驱动数字化增长 在电商行业竞争日益激烈的当下&#xff0c;垂直电商供应链平台凭借对细分领域的深度聚焦与数字化能力&#xff0c;成为产业升级的关键引擎。本文围绕垂直电商供应链平台的架构、价值及生态构建展开&…

VSCode 插件 Remote - SSH:开启高效远程开发之旅

在当今的软件开发领域&#xff0c;远程开发已经成为了一种越来越流行的工作方式。无论是分布式团队协作&#xff0c;还是需要在不同环境中进行开发&#xff0c;远程开发都能为开发者带来极大的便利。而 VSCode 的 Remote - SSH 插件&#xff0c;就是一款能够帮助开发者实现高效…

亚矩阵云手机+Whatnot:直播电商的自动化增长引擎

在直播电商蓬勃发展的今天&#xff0c;Whatnot作为北美领先的收藏品和潮流商品拍卖平台&#xff0c;吸引了大量卖家和收藏爱好者。然而&#xff0c;高效运营多个账号、管理直播场次、优化出价策略等挑战&#xff0c;让许多商家难以规模化经营。​​亚矩阵云手机​​与​​Whatn…

关于vue.mixin与vue.use的用法分析

背景。源码不会读&#xff0c;不清楚的问大模型。特别是对平常开发太会用到的情形。 vue.mixin。是将每一个页面注入mixin的内容。会对页面中注入$uStore而不是方便获取状态信息。 vue.use。按装的插件。用于封装完整的功能&#xff0c;如UI库&#xff0c;路由拦截器等&…

MySQL 8.x配置MGR高可用+ProxySQL读写分离(二):ProxySQL配置MySQL代理及读写分离

#作者&#xff1a;stackofumbrella 文章目录 ProxySQL简介ProxySQL架构ProxySQL的安装与配置在不同层次间移动配置 ProxySQL简介 ProxySQL是基于MySQL的一款开源的中间件的产品&#xff0c;是一个灵活的MySQL代理层&#xff0c;可以实现读写分离&#xff0c;支持Query路由功能…

基于 Python Flask 的 B/S 架构项目的软件设计思路

文章目录 基于 Python Flask 的 B/S 架构项目的软件设计思路1. 引言2. B/S架构概述2.1 什么是B/S架构2.2 B/S架构的组成层次2.3 B/S vs C/S架构对比2.4 现代B/S架构的发展趋势 3. Flask在B/S架构中的定位3.1 Flask作为B/S架构的后端框架3.2 Flask的架构优势3.3 Flask在不同B/S架…

AntV F2入门教程

以下教程将系统地介绍 AntV F2&#xff08;移动端可视化引擎&#xff09;的核心 组件 API&#xff0c;包含安装与引入、画布与图表、数据映射、几何标记、坐标轴、图例、提示、标注和滚动条等&#xff0c;每个 API 都附带完整示例代码&#xff0c;帮助你快速掌握 F2 用法。 一…

退休时医疗保险补缴的基数影响什么

退休时医疗保险的补缴基数主要影响补缴金额、医保个人账户划入待遇、终身医保待遇的享受条件等关键方面。以下是具体分析&#xff1a; 1. 影响补缴金额的多少 补缴基数通常以退休时上年度全省/市职工月平均工资或本人退休前缴费基数为基准&#xff08;各地政策不同&#xff09…

conda导出环境文件requirements.txt

conda导出的几种方式 方式一&#xff1a;使用pip freeze&#xff08;推荐&#xff09; 如果你主要使用 pip 安装包&#xff0c;且环境中的包都兼容 PyPI&#xff0c;可以直接用 pip 导出&#xff1a; conda activate your_env_name # 激活环境&#xff08;若未激活&#xf…

华为云 Flexus+DeepSeek 征文|增值税发票智能提取小工具:基于大模型的自动化信息解析实践

华为云 FlexusDeepSeek 征文&#xff5c;增值税发票智能提取小工具&#xff1a;基于大模型的自动化信息解析实践 前言背景 企业财务处理中&#xff0c;增值税发票信息手动提取存在效率低、易出错等痛点&#xff0c;华为云 Flexus 弹性算力联合 DeepSeek 大模型&#xff0c;通过…

亚马逊选品 家具或艺术?指纹技术重构两者

58%毛利&#xff01;生物识别首饰盒代理 奢侈品零售的隐藏金矿&#xff1a;安防产品的毛利是普通家居的3倍&#xff01; 核心数据 零售价 4,900 | 代理价 1,990 → 毛利58% 零库存风险&#xff1a;90天寄售周期 72小时售罄&#xff1a;贝弗利山庄快闪店卖出47台 首批10家特权…

面试150 加油站

思路 此题&#xff0c;我们从贪心算法的角度进行思考。通过计算净消耗&#xff0c;如果总的净消耗小于0&#xff0c;说明无论如何都不能环路行驶一周。我们通过定义一个start起点&#xff0c;通过遍历数组计算净消耗&#xff0c;如果净消耗小于0&#xff0c;重新置0&#xff0…

2025年渗透测试面试题总结-渗透测试工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 渗透测试工程师 1. 自我介绍 2. 印象深刻的渗透案例&#xff1a;电商平台供应链攻击 3. 渗透测试标准化流…

Vulkan 学习笔记15—Mipmap 与多重采样

一、Mipmap 生成总结 一、Mipmap 基础概念 定义&#xff1a;Mipmap 是图像预先计算的缩小版本&#xff0c;每个层级宽高为前一层的一半&#xff0c;用作细节级别&#xff08;LOD&#xff09;。作用&#xff1a; 远离相机的对象使用较小层级采样&#xff0c;提升渲染速度。避免…

HarmonyOS隐私保护全攻略:从入门到精通

&#x1f4f1; HarmonyOS隐私保护全攻略&#xff1a;从入门到精通 &#x1f6e1;️ 大家好呀&#xff01;今天咱们来聊聊移动互联网时代最让人头疼的问题之一 —— 隐私保护&#xff01;随着HarmonyOS生态越来越丰富&#xff0c;这个问题也变得格外重要啦&#xff01;✨ &…

《使用IDEA插件部署Spring Boot项目到Docker》

准备工作 确保已安装Docker并已启动/本地也需要安装Docker IDEA中已安装Docker插件&#xff08;通常已预装&#xff09; 项目是基于Spring Boot的Maven或Gradle项目 1. 配置Docker连接 打开IDEA设置(File > Settings)导航到Build, Execution, Deployment > Docker点击…