微信小程序商城项目之购物数量加减（3）

我们在购买宝贝的时候，购物的数量，经常是我们需要使用的，如下所示：
在宝贝详情页里：

在购物车里：

现在就为大家介绍这个小组件，在小程序中，该如何去写
下图为本项目的图：

wxml：

<!-- 主容器 -->
<view class="stepper">
  <!-- 减号 -->
  <text class="{{minusStatus}}" bindtap="bindMinus">-</text>
  <!-- 数值 -->
  <input type="number" bindchange="bindManual" value="{{num}}" />
  <!-- 加号 -->
  <text class="normal" bindtap="bindPlus">+</text>
</view>

wxss：

/*全局样式*/
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;
}

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
    });
  }
})

运行结果：

demo下载地址：商城购物数量加减

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序商城项目之侧栏分类效果（1）

    微信小程序商城项目之侧栏分类效果（1）

    在商场项目中,一般都会有分类页面. 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 布局分析: <主盒子> <左盒子></左盒子> <右盒子></右盒子> </主盒子> 左盒子使用标准流 右盒子使用绝对定位(top.right) wxml: <!--主盒子--> <view class="container"> <!--左侧栏--> <view class

  • 微信小程序商城项目之淘宝分类入口（2）

    微信小程序商城项目之淘宝分类入口（2）

    分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程序的页面跳转和参数传递 -- 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项. 这样满5个item后,自动排在下一行 wxml: <view class="menu-wrp"> <!

  • 微信小程序购物商城系统开发系列-工具篇的介绍

    微信小程序购物商城系统开发系列-工具篇的介绍

    微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

  • 微信小程序 商城开发（ecshop ）简单实例

    微信小程序 商城开发（ecshop ）简单实例

    最近小程序特别火,所以我们公司也针对ecshop平台对接了小程序 包括完整的用户系统和购物体统 用户系统:收货地址,订单管理,消息管理,优惠券管理等等 购物系统支付购物车管理,微信支付等等 相信有很多小伙伴都用的是ecshop作为自己的商城,最近小程序又火了,于是就有人问ecshop对接小程序怎么做. 正好最近在开发一个对接ecshop的小程序项目,就将我的一些开发经验分享一下. 一:扫描小程序二维码后的用户信息的获取和缓存 获取用户信息需要用到两个api wx.login(OBJECT) 调用

  • 微信小程序购物商城系统开发系列-目录结构介绍

    微信小程序购物商城系统开发系列-目录结构介绍

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

  • 微信小程序商城项目之商品属性分类（4）

    微信小程序商城项目之商品属性分类（4）

    续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_a

  • 微信小程序商城项目之购物数量加减（3）

    微信小程序商城项目之购物数量加减（3）

    我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

  • golang实现微信小程序商城后台系统（moshopserver）

    golang实现微信小程序商城后台系统（moshopserver）

    golang和c/c++比起来是一门新的语言,一直想学,网上搜集了一些资料,有些人说很容易上手,确实是这样,和C/C++比起来,少了很多乱七八糟的语法.学一门新的语言,最好的方法就是动手写一些东西,最近小程序也比较火,也想学一下,网络上搜索的一些开源项目,基本上没有golang实现的,大部分都是nodejs和java写的,那么我就来实现一个golang版的吧,一石二鸟. 开发小程序前后端都需要开发,自己的前端经验很少,搜索了一些开源代码,有一个小程序项目让人眼前一亮,Nideshop,界面做的不

  • 微信小程序动态显示项目倒计时效果

    微信小程序动态显示项目倒计时效果

    本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>

  • 微信小程序动态显示项目倒计时

    本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.展示的效果如下 2.wxml代码: <!--倒计时 --> <text wx:if="{{clock!=''}}">仅剩{{clock}}</text> <text wx:if="{{clock==''}}">已经截止</text> 3.js代码: 在拼团项目中获取到活动结束时间的格式为一下格式 因该格式无法正常计算时

  • typescript编写微信小程序创建项目的方法

    创建项目 在微信开发者工具创建项目,在语言中选择 TypeScript 改造项目 编辑 package.json 文件,修改 miniprogram-api-typings 和 typescript 版本 { "name": "miniprogram-ts-quickstart", "version": "1.0.0", "description": "", "scripts&

  • 微信小程序实战项目之富文本编辑器实现

    微信小程序实战项目之富文本编辑器实现

    目录 前言 1. 实现效果 2. 创建发布页面,实现基本布局 3. 实现编辑区操作栏的功能 3.1. 实现文本加粗.斜体.文本下划线.左对齐.居中对齐.右对齐 3.2. 实现撤销.恢复.插入图片.删除操作 4. 参考 总结 前言 这是我参加掘金启航计划的第三篇文章,这次总结的是实现一个简单的富文本编辑器,相信阅读文章后,观众老爷们,能够实现富文本编辑器,在微信小程序中发布自己的文章,希望观众老爷们多多支持! 1. 实现效果 实现的效果如下图: 实现的功能点如下: 文本加粗.斜体.下划线,对齐方式

  • 微信小程序实现瀑布流分页滚动加载

    微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

随机推荐