小程序自定义弹出框效果
更新时间:2022年7月18日 19:00 点击:518 作者:蔬菜_
本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下
my-pop----api:
title ------字符串---------自定义弹窗标题
context ------字符串---------自定义弹窗内容
cancelTxt ------字符串---------取消按钮文本
cancelCor ------字符串---------取消按钮颜色
inp ------布尔值---------true文本弹出框---------fasle默认弹出框
okTxt ------字符串---------确定按钮文字
okCor ------字符串---------确定按钮颜色
@cancel ------事件---------点击取消按钮事件可携带value参数
@ok ------事件---------点击确定按钮事件可携带value参数
//使用方法 //在目标文件json文件里引入该组件 "usingComponents": { "mypop":"/components/my-pop" } <mypop id="mypop" context="测试一下主体" inp="{{true}}" bindok="ok"/> //给组件一个id this.selectComponent("#mypop").openPop(); //打开弹窗 ok(e) //点击确定触发 如果是inp类型弹窗 e 就是input的value , 反之e为空串 cancel(e) //点击取消触发 如果是inp类型弹窗 e 就是input的value , 反之e为空串
弹窗js文件:
Component({ /** * 组件的属性列表 */ properties: { title: { type: String, value: '默认标题', }, context: { type: String, value: '默认内容', }, inp:{ type: Boolean, value: true }, cancelTxt: { type: String, value: '取消', }, cancelCor:{ type:String, value:'black' }, okTxt: { type: String, value: '确认', }, okCor:{ type:String, value:'red' }, }, /** * 组件的初始数据 */ data: { show:false, animation:'', animationPop:'', inpVal:'' }, methods: { bindinput(e){ let {value} = e.detail this.setData({inpVal:value}) }, ok(){ this.triggerEvent("ok",this.data.inpVal); this.hidePop() this.setData({inpVal:''}) }, cancel(){ this.triggerEvent("cancel",this.data.inpVal); this.hidePop() this.setData({inpVal:''}) }, openPop(){ var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.opacity(0).step() this.setData({ animationData: animation.export(), show:true }) setTimeout(function () { animation.opacity(1).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hidePop(){ var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.opacity(0).step() this.setData({ animationData: animation.export() }) setTimeout(function () { this.setData({ show:false }) }.bind(this), 200) } } })
弹窗wxml文件:
<!--components/my-pop.wxml--> <view> <view class="mask" animation="{{animationData}}" bindtap="hidePop" wx:if="{{show}}"> <view class="content" animation="{{animationPop}}" catchtap > <view class="title">{{title}}</view> <view class="txt" wx:if="{{!inp}}">{{context}}</view> <view class="inp" wx:if="{{inp}}"> <input type="text" value='{{inpVal}}' bindinput="bindinput" name="" id="" /> </view> <view class="btnView"> <view class="cancel" hover-class="op5" bindtap="cancel" style="color:{{cancelCor}}">{{cancelTxt}}</view> <view class="partition"></view> <view class="ok" hover-class="op5" bindtap="ok" style="color:{{okCor}}">{{okTxt}}</view> </view> </view> </view> </view>
弹窗wxss文件:
.mask{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } .content{ background: #FFFFFF; border-radius: 16rpx; width: 70%; } .title{ padding: 32rpx 0rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: black; } .txt{ color: #000000; font-size: 24rpx; text-align: center; margin-bottom: 32rpx; } .btnView{ border-top: 1rpx solid #D4D6D8; display: flex; align-items: center; justify-content: space-around; } .cancel{ width: 49%; display: flex; align-items: center; justify-content: center; height: 80rpx; line-height: 80rpx; } .ok{ width: 49%; display: flex; align-items: center; justify-content: center; height: 80rpx; line-height: 80rpx; } .inp{ text-align: center; padding: 5px 0px; font-size: 24rpx; margin: auto; color: #868686; width: 90%; border: 1.2px solid #DEDEDE; border-radius: 5px; margin-bottom: 32rpx; } .op5{ opacity: .5; background: rgba(0,0,0,0.05); } .partition{ width: 2rpx; height: 80rpx; background: #D4D6D8; }
弹窗json文件:
{ "component": true, "usingComponents": {} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/hello917/article/details/105118070
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
Framework7 设置是否允许点击弹出框外部区域,关闭弹出层
下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域,关闭弹出层的使用例子,具体的细节步骤如下文介绍。 1,Framework7中三大类弹出框 (1)模态框(moda...2016-10-02- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25