广告位联系
返回顶部
分享到

微信小程序自定义弹窗实现过程(附代码)

JavaScript 来源:互联网搜集 作者:秩名 发布时间:2019-12-06 12:29:35 人浏览
摘要

小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式: 举个例子,像下面图的样式,点击后会弹出不一样的窗口: 代码如下: index.wxml 文件 !--index.wxml--view class=click bindtap=click text点击出现弹窗

小程序官网里弹出框一般都是类似下面形式:


而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:

举个例子,像下面图的样式,点击后会弹出不一样的窗口:
 

代码如下:

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上,链接如下:

https://github.com/bbSpider/miniprogram



版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jianshu.com/p/539dfa8ba1ab
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计