⼩程序⾃定义弹窗实现过程（附代码）
这篇⽂章主要介绍了⼩程序⾃定义弹窗实现过程(附代码),⽂中通过⽰例代码介绍的⾮常详细，对⼤家的学习或者⼯作具有⼀定的参考学习价值，需要的朋友可以参考下
⼩程序官⽹⾥弹出框⼀般都是类似下⾯形式：
⽽有时候我们需要更丰富的弹窗时，就可⽤⾃定义弹窗的样式：
举个例⼦，像下⾯图的样式，点击后会弹出不⼀样的窗⼝：
代码如下：
index.wxml ⽂件
<!--index.wxml-->
<view class="click" bindtap="click">
<text>点击出现弹窗</text>
</view>
<!-- 弹窗 -->
<view class="window" wx:if="{{tab==1}}">
⾃定义内容。。。
写文章的小程序</view>
index.wxss ⽂件
/**index.wxss**/
.click{
width: 500rpx;
height: 70rpx;
font-size: 20px;
}
.
window{
position: fixed;
height: 400rpx;
width: 400rpx;
transform: translate( 50%, 50%);/*距x,y轴*/
background: salmon;
}
index.js ⽂件
//index.js
//获取应⽤实例
const app = getApp()
Page({
data: {
tab: 0
},
//点击出现弹窗
click: function() {
let that = this;
that.setData({
tab: 1
});
}
})
完整代码已放在github上，链接如下：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。