微信小程序 自定義帶圖片彈窗

1. 微信小程序 自定義帶圖片彈窗

在這里插入圖片描述

1.1. 實現思路

??使用官方組件實現圖片模態彈窗。
首先找到官方文檔:?顯示模態彈窗的API wx.showModal(OBJECT)
在這里插入圖片描述
wx.showModal參數介紹發現并沒有設置圖片的參數,但是這是一個API,但是組件呢?我并沒有在官方文檔中找到,但是經過嘗試發現是可以顯示一個模態彈窗的,即:

wx.showModal({title: '提示',content: '這是一個模態彈窗',success: function(res) {if (res.confirm) {console.log('用戶點擊確定')} else if (res.cancel) {console.log('用戶點擊取消')}}
})

??可以改寫為:

<modal title='提示' hidden="{{modalHidden}}" bindcancel='modalCancel' bindConfirm='modalConfirm'>這是一個模態彈窗
</modal>

??其中按鈕標題可使用comfirmText="新名字"設置,但是發現顏色好像無法自定義。。。找到方法的小伙伴們望告知。
但是是否隱藏,確認以及取消的回調都需要自己手動綁定至js進行控制,效果還是一樣的。
在這里插入圖片描述
這樣子的話其實大家就明白了,只是一個容器,大家可以盡情的發揮想象去定制,既不用完全自己去實現一個自定義模態彈窗視圖,又可以擺脫官方wx.showModal的簡陋。

1.2. 實例

1.2.1. customDialog3.wxml

<view class='container'><button class='button' bindtap='buttonTap' type='primary'>顯示彈窗</button><modal title="我是標題" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel"><view class="modal-layput"><image class="modal-image" mode='aspectFill' src="../../image/icon/board-active.png"></image><view>You say that you love rain,</view></view></modal>
</view>

1.2.2. customDialog3.wxss

.modal-layput {display: flex;flex-direction: column;align-items: center;
}
.modal-image {width: 150rpx;height: 120rpx;margin: 10rpx 20rpx 0rpx 0rpx;float: left;
}

1.2.3. customDialog3.js

// pages/customDialog3/customDialog3.js
Page({data: {modalHidden: true},onLoad(options) {},buttonTap(){this.setData({modalHidden: false})},modalConfirm(){this.setData({modalHidden: true})},modalCandel(){this.setData({modalHidden: true})},})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/90701.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/90701.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/90701.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

私有化大模型架構解決方案構建指南

內容概要本指南旨在為企業提供私有化大模型架構解決方案的全面構建路徑&#xff0c;幫助其在保障數據隱私的同時提升業務效率。我們將系統解析關鍵環節&#xff0c;包括安全部署策略設計、模型訓練核心技術、持續優化機制構建以及知識管理實踐路徑。此外&#xff0c;指南還涵蓋…

面試150 查找和最小的K對數字

思路1 超時法&#xff1a;通過兩個循環記錄三元組[num1,num2,num1num2]然后通過num1num2從小到大進行排序&#xff0c;然后返回前K個對數中的前兩個數即可。 class Solution:def kSmallestPairs(self, nums1: List[int], nums2: List[int], k: int) -> List[List[int]]:if n…

vscode目錄,右鍵菜單加入用VSCode打開文件和文件夾(快速解決)(含刪除)(腳本)

1.創建文本文件 在桌面右鍵單擊&#xff0c;選擇“新建” > “文本文檔”&#xff0c;將其命名為“vscode.txt”2.復制代碼內容3.修改文件擴展名 右鍵單擊“vscode.txt”文件&#xff0c;選擇“重命名”&#xff0c;將文件擴展名從.txt改為.reg&#xff0c;使其成為“vscode…

Chart.js 柱形圖詳解

Chart.js 柱形圖詳解 引言 在數據可視化領域&#xff0c;柱形圖是一種非常常見的圖表類型&#xff0c;它能夠直觀地展示不同類別或組的數據之間的比較。Chart.js 是一個基于 HTML5 Canvas 的開源庫&#xff0c;它提供了一系列的圖表繪制功能&#xff0c;其中包括柱形圖。本文將…

沉浸式文旅新玩法-基于4D GS技術的真人數字人賦能VR體驗升級

線下沉浸式劇場與 LBE VR 相結合&#xff0c;會碰撞出什么樣的火花&#xff1f;本次 PICO 視頻、東方演藝集團與火山引擎一起&#xff0c;將沉浸式演出《只此周莊》的部分場景復刻到了 VR 世界&#xff0c;讓用戶在虛擬的古代周莊夜市里&#xff0c;體驗了古老的故事以及精彩紛…

C程序內存布局詳解

C程序內存布局詳解 1. 內存布局概述 C程序在內存中分為以下幾個主要區域&#xff08;從低地址到高地址&#xff09;&#xff1a; 代碼段&#xff08;.text&#xff09;只讀數據段&#xff08;.rodata&#xff09;初始化數據段&#xff08;.data&#xff09;未初始化數據段&…

新手向:Git下載全攻略

Git 的安裝與重要性在現代軟件開發中&#xff0c;版本控制是必不可少的工具&#xff0c;而 Git 是目前最流行的分布式版本控制系統。無論是個人開發者還是大型團隊&#xff0c;Git 都能高效管理代碼變更&#xff0c;確保項目歷史清晰可追溯。安裝 Git 是開發者入門的第一步&…

linux中如何清除history命令

寫在前面 使用ssh遠程連接客戶端連接上linux后操作的命令多了&#xff0c;有時候需要清除對應的歷史命令記錄&#xff0c;可以通過下面幾種方式實現。第一種方法 通過修改.bash_history文件 這是最簡單直接的方法&#xff0c;但是只會影響當前用戶的歷史記錄。執行以下命令即可…

PHP插件開發中的一個錯誤:JSON直接輸出導致網站首頁異常

問題描述 最近在使用步數統計插件&#xff08;WeFootStep&#xff09;時&#xff0c;發現網站首頁完全變成了一段JSON數據&#xff0c;而不是正常的HTML頁面。具體表現為首頁顯示如下內容&#xff1a; {"results":"<li><a href\"https:\/\/blog…

落霞歸雁的思維框架:十大經典思維工具的源頭活水

在當今復雜多變的世界中&#xff0c;思維框架成為了解決問題、優化決策和提升效率的重要工具。提到思維框架&#xff0c;人們往往會想到那些被廣泛認可和應用的十大經典思維工具&#xff1a;金字塔原理、黃金圈法則、5W1H分析法、SWOT分析、SCQA模型、STAR法則、PDCA循環、六頂…

spring Could 高頻面試題

一、基礎概念Spring Cloud 的核心組件有哪些&#xff1f; 答案&#xff1a;Eureka/Nacos&#xff08;服務注冊發現&#xff09;、Ribbon/LoadBalancer&#xff08;負載均衡&#xff09;、Feign/OpenFeign&#xff08;聲明式HTTP客戶端&#xff09;、Hystrix/Sentinel&#xff0…

從零開始的云計算生活——番外6,使用zabbix對中間件監控

目錄 一.網絡設備監控 1、GNS模擬器的使用 創建路由 創建交換機 2.構建網絡 3.添加Cisco路由器的監控 二.中間件監控 1、MySQL數據庫監控 1.1、拷貝自定義的監控腳本到指定目錄 1.2、添加監控用戶 1.3、重啟zabbix-agent服務 1.4、在zabbix-server服務端測試數據 1…

haproxy七層均衡

一.haproxy的安裝和服務信息1.1實驗環境ip實驗設備172.25.254.100haproxy172.25.254.10RS1172.25.254.20RS2172.25.254.111client1.2軟件安裝及配置haproxy主機上配置#下載#進入此文件進行編輯#關閉防火墻RS1主機上配置#下載#生成默認文件#重啟#關閉防火墻RS2主機上配置#下載#生…

分類預測 | MATLAB實現CPO-SVM冠豪豬算法優化支持向量機分類預測

分類預測 | MATLAB實現CPO-SVM冠豪豬算法優化支持向量機分類預測 目錄 分類預測 | MATLAB實現CPO-SVM冠豪豬算法優化支持向量機分類預測 分類效果 基本介紹 算法步驟 參數設定 運行環境 應用場景 程序設計 參考資料 分類效果 基本介紹 該MATLAB代碼實現了基于冠豪豬優化算法(…

【MySQL 數據庫】MySQL基本查詢(第二節)

文章目錄&#x1f4dd;Update&#x1f309; 將孫悟空同學的數學成績變更為 80 分&#x1f309; 將曹孟德同學的數學成績變更為60分&#xff0c;語文成績變更為70分&#x1f309; 將總成績倒數前三的3位同學的數學成績加上30分&#x1f309;將所有同學的語文成績更新為原來的2倍…

Axios 響應攔截器

1.定義&#xff1a;響應攔截器&#xff08;Response Interceptor&#xff09;是一個可以在 axios 接收到服務器響應后&#xff0c;響應數據交給 .then() 處理之前執行的函數。你可以用它來統一處理響應數據&#xff0c;進行錯誤處理&#xff0c;或者對返回的數據做格式化和轉換…

k8s的nodeport和ingress

1.流量轉發圖targerport轉發到實際的容器端口containerPort&#xff08;后端端口&#xff09;nodeportingress2.配置場景總結字段作用對象必填示例值何時配置containerPort容器否80需明確記錄容器端口時&#xff08;推薦&#xff09;targetPortPod是80定義 Service 轉發規則時p…

VLA:自動駕駛的“新大腦”?

&#x1f525; 什么是 VLA&#xff1f;為什么突然火了&#xff1f;在自動駕駛圈子里&#xff0c;最近一個詞特別火&#xff1a;VLA。它不是某個新車的型號&#xff0c;也不是某家公司的新品牌&#xff0c;而是一種全新的智能架構&#xff0c;被稱為“自動駕駛的大腦2.0”。&…

Linux操作系統之線程(八):信號量sem

前言&#xff1a;大家好啊&#xff0c;我們上一篇文章已經講解了關于線程同步的一種辦法&#xff1a;運用條件變量cond。今天&#xff0c;我們就來學習一下線程同步的另外一種方法&#xff0c;信號量&#xff01;&#xff01;信號量呢有System V 信號量與POSIX 信號量&#xff…

【RocketMQ】一分鐘了解RocketMQ

MQ是什么 MQ全稱為Message Queue&#xff0c;即消息隊列 &#xff0c;是一種提供消息隊列服務的中間件&#xff0c;也稱為消息中間件&#xff0c;是一套提供了消息生 產、存儲、消費全過程的軟件系統&#xff0c;遵循FIFO原則。 MQ的好處有哪些 異步解耦 最常見的一個場景是…