微信小程序——加入购物车弹层
对于网上商城,加入购物车是一个必备功能了。俺今天就来说下在微信小程序里如何造一个购物车弹层。
先上图:
主要用到的微信API:wx.createAnimation(OBJECT)
说下思路:
1.wxml文件里将页面布局好,我的布局如下图:
大概的框架代码如下:
<view class='mask-layer' wx:if="{{showPop}}" bindtap='hideModal'></view>
<view class='pop-add-cart pop-common' wx:if="{{showPop}}" animation='{{animationData}}'>
<view class='header row'>
头部区域
</view>
<scroll-view class='body' scroll-y='true'>
中间区域
</scroll-view>
<view class='footer toolbar'>
底部区域
</view>
</view>
2.wxss里面写样式,主要的样式代码如下:
.mask-layer {
width: 100%;
height: 100%;
position: fixed;
top:;
left:;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index:;
color: #fff;
}
.pop-common {
width: 100%;
overflow: hidden;
position: fixed;
bottom:;
left:;
z-index:;
background: #fff;
}
3.写动画所需的js:
//获取应用实例
var app = getApp(); Page({ /**
* 页面的初始数据
*/
data: {
showPop: false,
animationData: {},
}, // 显示底部弹层
showModal: function() {
var _this = this;
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
delay: 0
})
_this.animation = animation
animation.translateY(300).step()
_this.setData({
animationData: animation.export(),
showPop: true
})
setTimeout(function() {
animation.translateY(0).step()
_this.setData({
animationData: animation.export()
})
}.bind(_this), 50)
},
// 隐藏底部弹层
hideModal: function() {
var _this = this;
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
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(),
showPop: false
})
}.bind(this), 200)
},
})
三步搞定!!上述代码配着小程序的官方文档来看,要理解它,难度应该不大。自己动手试试吧~~
微信小程序——加入购物车弹层的更多相关文章
- 微信小程序之底部弹框预约插件
代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序实战 购物车功能
代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城 ...
- 微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
- 微信小程序笔记<七>视图层 —— wxml
微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view& ...
- [转]微信小程序之购物车功能
本文转自:https://www.cnblogs.com/linxin/p/6834206.html 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法 ...
- 【微信小程序】转载:微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
- 微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...
- 微信小程序开发-第一弹
前言: 本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步 注册 1.1 打开网址 https://mp.weixin.qq.com/ ...
随机推荐
- Android应用一般上架流程
Android App上架所需文件 上架准备 App文件: 1. 安装包 2. 应用商标:图片格式KB. 3. 应用截图(4~6张):图片格式JPG或者PNG.图片大小480*800,且每张大小一致 ...
- Win 10服务智能化有什么依据?
在今年7月29日之后.Win 10操作系统就叫"视窗服务"了,当中有没有"智能'因素呢?能不能叫做"智能操作系统"呢?为什么?什么是& ...
- Umeng社会化组件使用笔记
1.申请umeng账号 2.下载umeng sdk,并且阅读友盟开放文档 3.申请各开放平台的账号,获取appid .appkey.appsecret:注意,这里需要配置安全域名sns.whalecl ...
- JAVA与C++,C与C++的差别
首先来分析JAVA与C++的差别: JAVA是纯面向对象的语言,而C++是基于面向对象过程的语言. JAVA有着垃圾回收机制.它的语法是C++的子集,即JAVA有的C++都有.而C++有的JAVA不全 ...
- http缓存机制之304状态码
在网上看到一篇关于解释浏览器缓存更新机制304状态码的文章,里面说如果请求头中的If-Modified-Since字段和If-None-Match字段的值分别和响应头中的Last-Modified字段 ...
- lua -- string
table.keys 返回指定表格中的所有键. 格式: keys = table.keys(表格对象) 用法示例: , b = , c = } local keys = table.keys(t) - ...
- FLINK 设计文档
https://cwiki.apache.org/confluence/display/FLINK/Apache+Flink+Home https://cwiki.apache.org/conflue ...
- 【Linux技术】BusyBox详解
BusyBox 是很多标准 Linux® 工具的一个单个可执行实现.BusyBox 包含了一些简单的工具,例如 cat 和 echo,还包含了一些更大.更复杂的工具,例如 grep.find.moun ...
- package.json中配置浏览器
"browserlist":[ ">=1%", "last 2 versions" ],
- Machine Learning、Date Mining、IR&NLP 会议期刊论文推荐
核心期刊排名查询 http://portal.core.edu.au/conf-ranks/ http://portal.core.edu.au/jnl-ranks/ 1.机器学习推荐会议 ICML— ...