明霞山资源网 Design By www.htccd.com
这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序官网里弹出框一般都是类似下面形式:
而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:
举个例子,像下面图的样式,点击后会弹出不一样的窗口:
代码如下:
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,自定义弹窗
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。