在微信小程序中创建属于自己的个性弹框

最新推荐文章于 2024-08-15 23:28:06 发布

weixin_34235105

最新推荐文章于 2024-08-15 23:28:06 发布

阅读量180

点赞数

文章标签： ui

原文链接：https://segmentfault.com/a/1190000018154968

版权

微信小程序提供的弹框模版就3种：
1、消息提示框

对应的效果是这样的

这一种ui我们可以改变的额只有icon、image、title
2、模拟对话框

对应的效果是这样的：

这一种做一些危险操作的提示之类等
3、显示操作菜单

对应效果如下：

这种可以用来填写某些选择行的信息

看了以上3种弹框，发现和我们Ui差距较大，都用不上。于是我自己写一个我的页面专用的弹框，具体效果如下图：

以下是代码贴图

最外层的phoneWin样式主要是写后面的遮罩层，content就是具体的弹框区域

弹框的显示隐藏用wx:if控制
然后就可以在弹框中写自己想要展示的效果啦！

忽略部分未调整样式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34235105

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序技术解读

weixin_38113097的博客

06-04

1406

文章目录小程序原理简介视图层（View）逻辑层（AppService）系统层小程序开发简介开发流程小程序发布一些常见问题用户信息获取网络请求页面路由跨平台兼容小程序码官方文档小程序第三方平台结语自今年初微信正式发布小程序，已有大半年时间。这期间，行业对微信小程序的关注经历了三个阶段。第一个阶段是刚发布时的火热，大家都盼望这是“又一个公众号”，尝试从各个不同角度解读、预测小程序的价值所在，担心像几年前公众号刚上线时那样再次作出“误判”、错过“流量红利”。第二个阶段是发布一两个星期后的失望和舆论冷

微信小程序自定义精美弹窗

03-26

微信小程序自定义弹窗微信小程序自定义弹窗微信小程序自定义弹窗微信小程序自定义弹窗

参与评论您还未登录，请先登录后发表或查看评论

微信小程序自定义弹窗wcPop|小程序弹窗模板|dialog对话框

chourenchan4303的博客

12-03

1151

微信小程序弹窗wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm及model、toast弱提示 微信小程序官方提供的交互反馈弹窗组件功能非常有限，很多自定义功能都不能实现，如是就自己开发了一个小程序自定义弹窗插件wcPop，可以随意自定义弹窗模板，...

微信小程序自定义弹窗

热门推荐

LeeBrook0的博客

09-02

2万+

开门见山地说，最近刚刚研究完微信小程序的消息订阅功能，踩了不少坑，也总结了一些心得，想着分享一下，帮大家避避坑。首先我先贴一下官方的文档地址，毕竟无论怎样一切都是以官方文档为准，其次小程序的更新迭代很频繁，我也不知道等各位看到我这篇文章的时候，我下文的这些内容还有没有用，官方文档：小程序订阅消息。然后简单来介绍下小程序的消息订阅功能，这个功能顾名思义就是给用户发送消息的。这个功能的前身是发送模板消息，但在2020年1月份后小程序官方停止了发送模板消息的功能，替代品就是现在的消息订阅功能，两者最大的

微信小程序解决自定义弹出层滑动时，下层页面滚动问题

厦门在乎科技

06-16

2788

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。场景一：弹窗内无滚动内容可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。此种方式会阻止弹窗内内容的滚动。场景二：弹窗内有滚动内容在弹窗外层根元素动态添加一个no-scroll样式，

（下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）

qq_15041931的博客

06-07

2469

阅读本篇文章之前，可以先看看上一篇分享的内容，主要讲微信小程序的由来，它的特点及产品优势，行业应用，开发语言，运行环境，开发前的准备工作等等。本项目是基于微信小程序原生框架，常用原生组件及官方API实现的小程序版个性简历，并引入炫酷的colorui组件库，展现不一样的精彩画面。

小程序如何生成海报分享朋友圈(1)

wang688699的博客

04-20

592

至此所有的步骤都已实现，在绘制的时候会遇到一些异步请求后台返回的数据，所以我用promise和async和await进行了封装，确保导出的图片信息是完整的。在绘制的过程确实遇到一些坑的地方。比如初开始导出的图片比例大小不对，还有用measureText测量文字宽度不对，多次绘制（可能受网络原因）有时导出的图片上的文字颜色会有误差等。如果你也遇到一些比较坑的地方可以一起探讨下做个记录，下面附下完整的代码。

小程序自定义marker弹出框教程

renkai721的专栏

06-06

1254

小程序+腾讯地图开发marker，自定义弹出框。小程序动态显示marker

微信小程序 简单自定义对话框

qq_45742039的博客

07-11

5198

前言课堂学了点基础，就写了点东西，不严谨，权当记录一下。演示效果大都是绝对布局没点击“修改个人资料”显示对话框时点击“修改个人资料”后，显示自定义对话框点击保存后，爱好和姓名会发生变化。点击右上角的“X”会关闭对话框以上就是啰哩吧嗦的它的动作描述页面代码 index.wxml 样式列表逻辑代码 index.json没改，默认原样。...

微信小程序 自定义弹框组件

m0_55969466的博客

10-25

1365

话不多说直接上代码。

微信小程序自定义Dialog弹框

lluohuih的专栏

05-11

3595

一、创建组件 1、在根目录下自定义一个components文件夹，用来存放自定义的组件。 2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。 3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其声明为一个组件。下面开始例子： 1、组件页面 index.wxml   <view class="dialog-overlay

微信小程序自定义弹出框

weixin_65490785的博客

12-13

878

微信小程序自定义弹出框

微信小程序自定义分享弹窗

学海无涯

08-23

3584

效果图：多种触发条件使用同一个弹窗： *.js触发处： this.setData({ isWrong:true, wrongtap:1, dialogWord:"wrong", wrongDec:"答案错误，是否向好友求助？" }) *.wxml布局： <view class="wrongDialog" wx:if="{{isWrong}}"> &lt...

微信小程序弹窗提示怎么写

liutao_li的博客

05-12

8459

第一种：弹出提示框，可以选择确定或者取消。代码： wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) {//这里是点击了确定以后 console.log('用户点击确定') } else {//这里是点击了取消以后 consol...

微信小程序自定义弹框

asteriaV的博客

09-21

298

效果图： wxml  <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view>  <view class="modalDlg-mask" wx:if="{{showModal}}"></view> <vie..

【微信小程序】自定义组件

小平果的欢乐谷

12-17

1万+

手把手教你实现微信小程序中的自定义组件微信小程序中的组件前言之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！（小程序文档），现在小程序支持简洁的组件化编程，可以将页面内

微信小程序原生实现自定义动画弹框教程

本示例介绍如何在微信小程序中使用原生方法实现自定义动画弹框和提示框，主要通过CSS3动画来完成。在微信小程序开发中，为了提供良好的用户体验，经常会需要实现各种交互式的提示效果，如底部弹出框、顶部提示框等...