html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。
html
CSS
.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 {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
}
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)
}
以上所述是小编给大家介绍的JS中微信小程序自定义底部弹出框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html自定义js程序,JS中微信小程序自定义底部弹出框相关推荐
- 小程序-----Vscode中微信小程序插件
1. 小程序开发助手 微信小程序开发助手 for VSCode,代码提示 + 语法高亮 2.minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 s ...
- node mysql商城开发_NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦 发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
- 基于有道翻译的英翻中微信小程序
基于有道翻译的英翻中微信小程序 环境 微信开发者工具 微信小程序云开发 node.js v12.16.3 axios@0.20.0 cheerio@1.0.0-rc.3 相关内容 Node.js有道翻 ...
- 微信小程序 -- 自定义底部弹出框(带动画--滑入滑出)
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
- php小程序地图处理,微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
- 【微信小程序系列】微信小程序超简单教程,基本语法,获取用户基本数据信息,实现对云数据库的增删改查及小程序外部api的引用示例(附源码)
[微信小程序系列]微信小程序超简单教程 小程序项目结构 静态页面的构成 HTML:结构 css:样式 js:行为 小程序 页面全部存放在pages, 而且pages目录只能存放页面 页面包括4个文件, ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如 ...
- 微信小程序的文件结构 —— 微信小程序教程系列(1)
文件结构 示例目录:HelloWorld *******************************************************分割线********************* ...
最新文章
- vs code配置python环境mac_mac vscode Python配置
- Devstack单节点环境实战配置
- python os 检查同名_2020Python 爬虫面试题,高薪就业Python面试必看
- 接水 2019-12-27
- Activity configChanges 含义
- android h5 ftp,HBuilderX ftp插件使用教程
- 图匠数据等提出高精度零售货架姿态估计算法GSPN
- javascript Control flow(控制语句)
- 从月薪3000到月薪30000,web前端应该怎么学?
- 字符串处理 百度之星资格赛 1002 列变位法解密
- bzoj 2141 : 排队 (cdq分治+bit)
- 系统学习机器学习之随机场(五)--CRF++源码L-BFGS算法补充
- 点线面的特点_黑白装饰画——点线面 设计入门必备
- Android聊天软件的开发(一)--预备知识
- 欧洲航天局遭匿名者(Anonymous)攻击泄露大量数据
- flask中的应用工厂
- Android apk闪退问题
- 为什么光标停在表格中间_在word光标处粘贴一表格,结果表格跑到别的位置,为啥?...
- 《物理世界》公布2022年度十大突破
- 手游测试之《弱网测试》
热门文章
- 阿里云发布vSphere虚拟机备份服务 ,网络带宽有限条件下依然能有效保护数据
- Mendix将升级低代码软件开发平台,发布全新数字化生态系统、行业云
- 云原生除了K8S、微服务,还有...?
- 一文了解 Spring Boot 服务监控,健康检查,线程信息,JVM堆信息,指标收集,运行情况监控!...
- 行!看到抖音上Python程序员晒得工资条,我沉默了......
- 写给大数据从业者:数据科学的5个陷阱与缺陷
- 11月4日,上海开源基础设施峰会,不见不散!
- VMware vSphere 6.7主机与虚拟机高级管理
- 要闻君说:微软拿下五角大楼超大云服务订单!恒大玩儿起了充电桩and新能源汽车?苹果公司要放弃自动驾驶业务?...
- 漫画:如何实现大整数相乘?(下)