uniapp手写自定义弹窗

弹窗这种东西真的是太常见了常见到烂大街但是每个平台的弹窗都不太一样样式不统一就不怎么好看像把代码编译到安卓端然后就… 哎不说了安卓离苹果的距离还是很远的这里只限于自己想设计统一样式当然用官网的插件也是可以的嘛

首先我们要做点什么呢

首先就是看这个弹窗它的结构和弹窗动作逻辑 em… 其实也就是弹出来然后能隐藏后面有一个遮罩层然后弹出窗居中

先做一个遮罩

这一步也不是太复杂直接就是一段CSS 代码就实现了上代码

<view class="popup"></view>

.popup {position: fixed;left: 0;right: 0;top: 0;height: 100vh;background-color: rgba(0,0,0,0.6);z-index: 9998;
}

这样我们就定义了一个当前页面的蒙层这里要要注意设置 z-index 层级高点 rgba后面的小数就是蒙层具体透明度了可自行调整接下来就是弹窗具体内容部分了

<view class="popup-info"></view>

这里我们让弹窗居中屏幕正中层级要比蒙层高这些也是用CSS 就实现了这里具体样式可以自己修改

.popup-info{position: fixed;width: 550upx;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 30upx;padding: 40upx;border-radius: 20upx;background-color: #fff;z-index: 9999;
}

这样完整的弹窗就出来了我们只要让他隐藏显示就可以了具体什么内容都可以写到弹窗里图片对话框文本提示什么的

接下来就是实现显示和隐藏的切换我们定义两个button按钮其实样式要好看的话最好不要用按钮用图片代替按钮样式是比较好的选择

<button type="default" @tap="tapPopup">我是弹窗</button>
<view class="popup" v-show="show"><view class="popup-info"><view>----我是内容----</view><view class="popup-btn"><view><button type="default" @tap="cancel">取消</button></view><view><button type="default" class="affirm" @tap="affirm">确认</button></view></view></view>
</view>export default {data() {return {show:false,},methods:{// 弹窗tapPopup() {this.show = true;},// 点击弹窗取消cancel() {this.show = false;},// 点击弹窗确认affirm() { this.show = false;}}
},

然后我们在其他需要弹窗的地方将这个show 设置为 true 就可以了是不是很简单代码只是伪代码不要直接这样写哦要结合自己的代码应用

uniapp手写自定义弹窗相关推荐

UNIAPP手写签名
uniapp手写签名 HTML <template><view ><canvas class="mycanvas" canvas-id="m ...
uniapp手写购物车单选全选反选
uniapp手写购物车单选全选反选这里是用图片切换的方法显示没有用到 checkbox 单选选项图片判断切换全选选项图片判断切换这里是用图片切换的方法显示没有用到 checkbox ...
手写自定义注解实现思路
我在这边问一下大家,你们说一下,我们现在想怎么样呢,这个时候大家记住一点,我们进入到正题,我们手写Spring的事务注解,在这边写一下,手写Spring的事务注解,既然手写的情况下,在这边我们假设,记 ...
C语言手写自定义三维数组
C语言手写三维数组本文目的是通过C语言的结构体和动态数组,实现自定义类型的三维数组TripleArray及其基本运算本文目的是通过C语言的结构体和动态数组,实现自定义类型的三维数组TripleAr ...
uniapp 手写签名组件
组件地址: 手写签名组件,弹框签名,可配置签名,签名返回base64,签名专用 - DCloud 插件市场 # 欢迎使用手写签名组件 **手写签名组件,签名后可以获取到base64编码,同时内置了弹 ...
uniapp手写_手写签名
前言: 简单的手写签名参考 https://www.auiaa.com/fron/uni/2019-03-17/103.html 的例子,进行了修改主要代码 @touchcancel='cance ...
uni-app手写签名并上传七牛云
创建canvas <view class="signature"><canvas class="mycanvas" canvas-id=&qu ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp手写_uni-app框架纯手写微信小程序开发左侧滑动菜单
原来到最后才发现有些东西,没有就真的没有.不行,就真的不行唠叨一会在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香),在大佬的指引下学会自己去写 ...

uniapp手写自定义弹窗

uniapp手写自定义弹窗

uniapp手写自定义弹窗相关推荐

最新文章

热门文章