小程序开发 root-portal对话框
2022/8/9 1:22:46
本文主要是介绍小程序开发 root-portal对话框,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
实现弹窗对话框
效果图
代码
.js
const app = getApp() Page({ data: { show: false, }, toggle() { this.setData({ show: !this.data.show, }) }, onClickCancel:function() { this.setData({ show: false }) }, onClickPositive:function() { this.setData({ show: false }) }, })
.wxml
<view> <root-portal wx:if="{{ show }}"> <view class="dialogRootPortal"> <text class="dialogTitleText">标题</text> <text class="dialogTitleContent">内容</text> <view class="dialogLine1" /> <view class="dialogButtonParent"> <view bindtap="onClickCancel" class="dialogButton1" hover-class="dialogHoverButton1">取消</view> <view class="dialogLine2"/> <view bindtap="onClickPositive" class="dialogButton2" hover-class="dialogHoverButton2">确定</view> </view> </view> </root-portal> <button bindtap="toggle" style="position: absolute; top: 20%; left: 25%; background-color: hotpink; z-index: -1;">显示 root-portal</button> </view>
.wxss
.dialogRootPortal{ position: absolute; background-color: #212121; width: 80%; left: 10%; top: 20%; border-radius: 50rpx; display: flex; flex-direction: column; } .dialogTitleText{ margin-top: 40rpx; text-align: center; font-size: 20px; color: white; top: 7%; } .dialogTitleContent{ margin-top: 40rpx; margin-bottom: 40rpx; text-align: center; font-size: 16px; width: 100%; color: white; } .dialogLine1{ width: 100%; height: 1px; background-color: #FFFFFF; } .dialogButtonParent{ display: flex; flex-direction: row; width: 100%; height: 100rpx; } .dialogLine2{ width: 2px; height: 100%; background-color: #FFFFFF; } .dialogButton1{ text-align: center; color: white; background-color: #212121; line-height: 100rpx; border-bottom-left-radius: 50rpx; flex-grow: 1; } .dialogButton2{ height: 100rpx; text-align: center; background-color: #212121; color: tomato; line-height: 100rpx; border-bottom-right-radius: 50rpx; flex-grow: 1; } .dialogHoverButton1{ text-align: center; color: white; background-color: #3b3b3b; line-height: 100rpx; border-bottom-left-radius: 50rpx; flex-grow: 1; } .dialogHoverButton2{ height: 100rpx; text-align: center; background-color: #3b3b3b; color: tomato; line-height: 100rpx; border-bottom-right-radius: 50rpx; flex-grow: 1; }
End
这篇关于小程序开发 root-portal对话框的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介
- 2023-09-30如何将微信抖音与支付宝小程序直接迁移到自有App中