微信小程序:選擇頁面單選實現(多頁面均可選擇)

一、效果展示

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
英文地址,請注明出處:http://en.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點擊…