PHP点击详情页弹出,微信小程序商品详情页中如何添加弹出框

落日映苍穹つ 2023-01-15 10:25 110阅读 0赞

这次给大家带来微信小程序商品详情页中如何添加弹出框，微信小程序商品详情页中添加弹出框的注意事项有哪些，下面就是实战案例，一起来看一下。

电商项目中商品详情页，加入购物车或者下单时可以选择商品属性的弹出框，通过设置view的平移动画，达到从底部弹出的样式

1.js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)//显示对话框

showModal: function () \{

// 显示遮罩层

var animation = wx.createAnimation(\{

duration: 200,

timingFunction: "linear",

delay: 0

\})

this.animation = animation

animation.translateY(300).step()

this.setData(\{

animationData: animation.export(),

showModalStatus: true

\})

setTimeout(function () \{

animation.translateY(0).step()

this.setData(\{

animationData: animation.export()

\})

\}.bind(this), 200)

\},

//隐藏对话框

hideModal: function () \{

// 隐藏遮罩层

var animation = wx.createAnimation(\{

duration: 200,

timingFunction: "linear",

delay: 0

\})

this.animation = animation

animation.translateY(300).step()

this.setData(\{

animationData: animation.export(),

\})

setTimeout(function () \{

animation.translateY(0).step()

this.setData(\{

animationData: animation.export(),

showModalStatus: false

\})

\}.bind(this), 200)

\}

2.wxss代码/\*使屏幕变暗 \*/

.commodity\_screen \{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: \#000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: \#fff;

\}

/\*对话框 \*/

.commodity\_attr\_box \{

height: 300rpx;

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: \#fff;

padding-top: 20rpx;

\}

3.wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中初始化，初始化为false，因为最初的时候对话框并没有显示)

在这里写弹出框里面的布局

4.设置点击事件，给目标view设置点击函数showModal()或者hideModal()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP点击详情页弹出,微信小程序商品详情页中如何添加弹出框

这次给大家带来微信小程序商品详情页中如何添加弹出框，微信小程序商品详情页中添加弹出框的注意事项有哪些，下面就是实战案例，一起来看一下。电商项目中商品详情页，加入购物车或者下

落日映苍穹つ/ 2023年01月15日 10:25/ 0 赞/ 111 阅读

相关微信小程序自定义Modal弹出框

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

向右看齐/ 2022年04月24日 08:46/ 0 赞/ 525 阅读

相关小程序弹出框

[https://www.cnblogs.com/bgwhite/p/9335648.html][https_www.cnblogs.com_bgwhite_p_9335648

逃离我推掉我的手/ 2022年04月22日 16:16/ 0 赞/ 339 阅读

相关微信小程序实现消息框弹出动画

js： Page({ data: { showModalStatus: false }, powerDrawer: func

系统管理员/ 2021年12月12日 19:57/ 0 赞/ 456 阅读

相关 uni-app 微信小程序弹出输入框

> 弹出输入框样式效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

浅浅的花香味﹌/ 2021年12月01日 10:34/ 0 赞/ 1684 阅读

相关微信小程序-弹出对话框

什么是对话框对话框是微信小程序的，界面交互的一种方式，其他的还有`toast`等。 > [https://developers.weixin.qq.com/minip

阳光穿透心脏的1/2处/ 2021年11月01日 14:06/ 0 赞/ 696 阅读

相关微信小程序底部弹出模态框

若有疑问请加qq群:581478349；承接小程序开发，web开发 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

迷南。/ 2021年09月20日 08:32/ 0 赞/ 609 阅读

相关小程序弹出框详解

![标题图][1240] 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假'];

待我称王封你为后i/ 2021年09月17日 04:40/ 0 赞/ 462 阅读

相关微信小程序开发—(五)弹出框

![20170503103049165][] <span style="color:333333"><view class="container" class=

「爱情、让人受尽委屈。」/ 2021年09月12日 06:20/ 0 赞/ 519 阅读

相关微信小程序 - 实现详情页分享功能

1、wxml文件：注意：一定要写 opne-type=“share”,button标签一定要在它的外面包裹一层view标签，不然我们是看不到button标签的

素颜马尾好姑娘i/ 2021年08月13日 13:14/ 0 赞/ 766 阅读