【小程序开发】购物车加减几件demo
<!-- 主容器 -->
<view class="stepper">
<!-- 减号 -->
<text class="{{minusStatus}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<input type="number" bindchange="bindManual" value="{{num}}" />
<!-- 加号 -->
<text class="normal" bindtap="bindPlus">+</text>
</view>
js:
Page({
data: {
// input默认是1
num: 1,
// 使用data数据对象设置样式名
minusStatus: 'disabled'
},
/* 点击减号 */
bindMinus: function () {
var num = this.data.num;
// 如果大于1时,才可以减
if (num > 1) {
num--;
}
// 只有大于一件的时候,才能normal状态,否则disable状态
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 点击加号 */
bindPlus: function () {
var num = this.data.num;
// 不作过多考虑自增1
num++;
// 只有大于一件的时候,才能normal状态,否则disable状态
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus
});
},
/* 输入框事件 */
bindManual: function (e) {
var num = e.detail.value;
// 将数值与状态写回
this.setData({
num: num
});
}
})
css:
/*全局样式*/
page {
padding: 20px 0;
} /*主容器*/
.stepper {
width: 80px;
height: 26px;
/*给主容器设一个边框*/
border: 1px solid #ccc;
border-radius: 3px;
margin:0 auto;
} /*加号和减号*/
.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
} /*数值*/
.stepper input {
width: 40px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
/*给中间的input设置左右边框即可*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
} /*普通样式*/
.stepper .normal{
color: black;
} /*禁用样式*/
.stepper .disabled{
color: #ccc;
}
效果图:
【小程序开发】购物车加减几件demo的更多相关文章
- 小程序开发初体验,从静态demo到接入Bmob数据库完全实现
之前我胖汾公司年会.问我能不能帮忙搞个小程序方便他们进行游戏后的惩罚/抽奖使用.出了个简单的设计图.大概三天左右做了个简单的小程序.目前提交审核了.对于写过一小段时间vue来说小程序很容易上手.写法和 ...
- 微信小程序 唯一标识 加减
var nums = 'goods_list[' + e.currentTarget.dataset.indexs+'].goods_num' //console.log(nuns) var num ...
- 微信小程序开发动感十足的加载动画--都在这里!
代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序-工具无法加载本地模拟开发服务的解决办法
微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务 请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发入门:10分钟从0开始写一个hello-world
小程序开发需要三个描述整体程序的app文件 和 一个描述多个页面的 pages文件夹. (1)三个app文件分别是app.js,app.json,app.wxss. app.js文件是脚本文件处理一些 ...
- 微信小程序开发05-日历组件的实现
接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城 ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
随机推荐
- HYSBZ(BZOJ) 4300 绝世好题(位运算,递推)
HYSBZ(BZOJ) 4300 绝世好题(位运算,递推) Description 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<= ...
- ABTest灰度发布
ABtest一个总的目的和意图是,判断哪种种UI或rerank策略更优,通过事实的依据( CTR或下单率)判断哪种策略更符合用户的习惯和需求. 我们经常会面临多个设计方案的选择,比如app或pc端某个 ...
- Java 从业一年的心得体会
在你打开此文时,你或许在犹豫这个职业,但是我觉得干就好了,没有适合不适合,趁年轻折腾吧! 以下是我一年来从事Java的经验积累,知识有很多,经验就九条 1.设计的数据库表尽量添加一个状态位,可以在删除 ...
- Django paginator and Form
django 提供的分页器 django 官方链接: https://docs.djangoproject.com/en/1.11/topics/pagination/ django提供了一些类来帮 ...
- 在 mac 上添加想要的命令
习惯了 Linux 下的 ll 命令,Mac 终端没有这个命令很不舒服.可以将 ll 别名解决这个问题: 打开终端,进入到当前根目录 cd ~ 编辑.bash_profile文件 vim .bash_ ...
- vue全局组件和局部组件
1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...
- windows下64位python的安装及机器学习相关包的安装(实用)
开通博客已久,想了好久决定写个基础的安装教程,望后人少走弯路,也借此希望跟大家多多交流.文中给出的链接默认是基于对python2.7的前提下的包. 1.首先下载64位Python包,进行安装(默认py ...
- const引用与非const引用
void print1(int a) { cout<<a<<endl; } void print2(const int& a) { cout<<a<& ...
- classpath 及读取 properties 文件
java代码中获取项目的静态文件,如获取 properties 文件内容是必不可少的. Spring 下只需要通过 @Value 获取配置文件值 <!-- 资源文件--> <util ...
- bzoj千题计划117:bzoj1026: [SCOI2009]windy数
http://www.lydsy.com/JudgeOnline/problem.php?id=1026 数位DP 如果前一位填的是0, 0是前导0,下一位可以随便填 0不是前导0,下一位不能填1 为 ...