这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序官网里弹出框一般都是类似下面形式:
而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:
举个例子,像下面图的样式、点击后会弹出不一样的窗口:
代码如下:
<强>索引。wxml文件
& lt; !——index.wxml祝辞
& lt;视图类="点击" bindtap=暗慊鳌北?
& lt; text>点击出现弹窗& lt;/text>
& lt;/view>
& lt; !——弹窗——比;
& lt;视图类=按翱凇钡奶炱?如果="{{选项卡==1}}”在
自定义内容……
& lt;/view>
<强>索引。wxs文件
/* * index.wxss * */.click {
宽度:500 rpx;
身高:70 rpx;
字体大小:20 px;
}
.window {
位置:固定;
身高:400 rpx;
宽度:400 rpx;
变换:翻译(50%,50%);x, y轴*//*距
背景:鲑鱼;
}
<强>索引。js文件
//index.js//获取应用实例
const应用=getApp ()
页面({
数据:{
标签:0
},//点击出现弹窗
点击:函数(){
让=这个;
that.setData ({
标签:1
}）;
}
})
完整代码已放在github上,链接如下:
https://github.com/bbSpider/miniprogram
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
