使用微信小程序开发弹出框应用实例详解

2024-02-24 11:10:41

view class="container" class="zn-uploadimg">
<button type="primary"bindtap="showok">消息提示框</button>
<button type="primary"bindtap="modalcnt">模态弹窗</button>
<button type="primary"bindtap="actioncnt">操作菜单</button>
 </view>

1.消息提示——wx.showToast(OBJECT)

//show.js
//获取应用实例
var app = getApp()
Page({
	showok:function() {
		wx.showToast({
		 	title: '成功',
		 	icon: 'success',
		 	duration: 2000
		})
	}
})

2.模态弹窗——wx.showModal(OBJECT)

//show.js
//获取应用实例
var app = getApp()
Page({
	showok:function() {
		wx.showToast({
		 	title: '成功',
		 	icon: 'success',
		 	duration: 2000
		})
	}
})

//show.js
//获取应用实例
var app = getApp()
Page({
	modalcnt:function(){
		wx.showModal({
			title: '提示',
			content: '这是一个模态弹窗',
			success: function(res) {
				if (res.confirm) {
				console.log('用户点击确定')
				} else if (res.cancel) {
				console.log('用户点击取消')
				}
			}
		})
	}
})

3.操作菜单——wx.showActionSheet(OBJECT)

//show.js
//获取应用实例
var app = getApp()
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})

4.指定modal弹出

指定哪个modal,可以通过hidden属性来进行选择。

<!--show.wxml-->
<view class="container" class="zn-uploadimg">
<button type="primary"bindtap="modalinput">
modal有输入框
</button>
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
 <input type='text'placeholder="请输入内容" auto-focus/>
</modal>

//show.js
//获取应用实例
var app = getApp()
Page({
	data:{
  hiddenmodalput:true,
  //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
 },
	//点击按钮痰喘指定的hiddenmodalput弹出框
	modalinput:function(){
		this.setData({
		 hiddenmodalput: !this.data.hiddenmodalput
		})
	},
	//取消按钮
	cancel: function(){
  this.setData({
   hiddenmodalput: true
  });
 },
 //确认
 confirm: function(){
  this.setData({
	  hiddenmodalput: true
	 })
 }
})

总结

以上所述是小编给大家介绍的使用微信小程序开发弹出框应用实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序自定义复选框实现代码实例

功能: 1.需要多选复选框,并且可以上拉滚动: 2.需要通过名称手写字母排序的,并且可以上拉滚动: 常规的小程序自带的原生picker无法满足我们的要求,因此一些特殊效果需要我们自定义来实现,废话不多说,我们直接看效果: index.wxml布局 <view class="container"> <view class='class bgFFF' bindtap='isDep'> <view class='class-text'> <text
微信小程序之几种常见的弹框提示信息实现详解

一.模态窗口 delete(){ wx.showModal({ title: '', content: '是否确认删除', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } 二.提示你想提示的信息提示你想提示的信息 wx.showToast({ title: '成功', icon: 'success', duration:
微信小程序实现多选框全选与取消全选功能示例

本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11
微信小程序实现下拉框功能

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q
微信小程序实现复选框效果

本文实例为大家分享了微信小程序实现复选框片展示的具体代码,供大家参考,具体内容如下样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的. 效果预览: js部分 // page/index/index.js Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value:
微信小程序自定义底部弹出框

本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下效果图: html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr
小程序实现搜索框功能

本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下实现效果图: xxx.wxml  <view class="weui-search-bar"> <view class="weui-search-bar__form">  <view class="weui-search-bar__box"> &l
微信小程序select下拉框实现效果

小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉这里为了更清楚的显示层级就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view>  <view class='list-msg2' bindtap='bi
使用微信小程序开发弹出框应用实例详解

view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button typ
Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解首先在官网下载示例代码, 选php的, 这里有个坑官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le
微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名类型默认值说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE
微信小程序之网络请求简单封装实例详解

微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request
微信小程序利用css实现遮罩效果实例详解

微信小程序利用css实现遮罩效果实例详解实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
微信小程序开发MAP（地图）实例详解

微信小程序开发MAP(地图)实例详解在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo
微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &
微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo
微信小程序wx.previewImage预览图片实例详解

一.小知识二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im
微信小程序移动拖拽视图-movable-view实例详解

JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

使用微信小程序开发弹出框应用实例详解

相关推荐

随机推荐