小程序开发 - 购买数量之加减限制

需求:

  • 至少选择一件
  • 最多选择3件

这个比较简单,就不多说了,直接上代码

wxml

<!-- 商品数量 -->
<view class=‘shop-number‘>
    <view class=‘shop-number-left‘>
        <view class=‘shop-number-left-name‘>购买数量</view>
        <view class=‘shop-number-left-desc‘>每人限购3件</view>
    </view>
    <view class=‘shop-number-right‘>
        <view class="shop-number-right-reduce {{payPopUp.minusBtn?‘disable-btn‘:‘‘}}" bindtap=‘minusCount‘>-</view>
        <view class=‘shop-number-right-input‘>{{payPopUp.submited.pay_number}}</view>
        <view class="shop-number-right-plus {{payPopUp.addBtn?‘disable-btn‘:‘‘}}" bindtap=‘addCount‘>+</view>
    </view>
</view>

js

data: {
    payPopUp: {
        submited: {
            pay_number: 1,
        },
        addBtn: false,
        minusBtn : true,
    }
},
// 增加
addCount: function() {
    let pay_number = this.data.payPopUp.submited.pay_number;
    if (pay_number != 3) {
        this.setData({
            [‘payPopUp.submited.pay_number‘]: ++pay_number,
            [‘payPopUp.minusBtn‘]: false
        })
        if (pay_number == 3) {
            this.setData({
                [‘payPopUp.addBtn‘]: true
            })
        }
    }
},

// 减少
minusCount: function() {
    let pay_number = this.data.payPopUp.submited.pay_number;
    if (pay_number != 1) {
        this.setData({
            [‘payPopUp.submited.pay_number‘]: --pay_number,
            [‘payPopUp.addBtn‘]: false
        })
        if (pay_number == 1) {
            this.setData({
                [‘payPopUp.minusBtn‘]: true
            })
        }
    }
}

wxss

/* 购买数量 */
.shop-number {
    width: 670rpx;
    height: 120rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #f2f2f2;

}
.shop-number-left {
    width: 220rpx;
    height: 80rpx;
}
.shop-number-left-name {
    line-height: 40rpx;
    font-size: 34rpx;

}
.shop-number-left-desc {
    line-height: 40rpx;
    font-size: 22rpx;
    color: rgb(250, 99, 39);

}
.shop-number-right {
    width: 300rpx;
    display: flex;
    height: 80rpx;
    padding: 5rpx 0;
    box-sizing: border-box;
}
.shop-number-right view{
    line-height: 70rpx;
    height: 70rpx;
    width: 100rpx;
    text-align: center;
    box-sizing: border-box;
    border: 1rpx solid #f2f2f2;
}
.shop-number-right-reduce {
    /* background: yellow; */
    border-radius: 10rpx 0 0 10rpx;
    border-right: 0;
}
.shop-number-right-input {
    /* background: red; */
    border-left: 0;
    border-right: 0;
}
.shop-number-right-plus {
    /* background: goldenrod; */
    border-radius: 0 10rpx 10rpx 0;
    border-left: 0;
}
.shop-number-right-reduce,.shop-number-right-plus{
    line-height: 60rpx !important;
}
.disable-btn {
    background: #f1f1f1;
}

原文地址:https://www.cnblogs.com/cap-rq/p/10087048.html

时间: 2024-10-08 00:54:17

小程序开发 - 购买数量之加减限制的相关文章

ECSHOP商品购买数量增加加减按钮插件(包含购物车商品数量增加减少,自动更新)

ecshop商品页购买数量加减按钮ecshop购物车页加减按钮插件 默认模版为例详细教程: 找到flow.php里的如下代码 elseif ($_REQUEST['step'] == 'update_cart') { if (isset($_POST['goods_number']) && is_array($_POST['goods_number'])) { flow_update_cart($_POST['goods_number']); } show_message($_LANG['

ECSHOP 商品详情页购买数量 添加加减按钮

<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/> 修改为 <span class="goods_cut" _src="images

小记一笔 -微信小程序开发随笔

序言: 今年的01月09号备受关注的微信小程序正式上线了, 众多的互联网企业也相继发布了自家的小程序.趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓捣鼓了一个个人记帐用的小程序:小记一笔.用户可以方便.快捷的将自己平时的开销与收入记录下来,还有各种类型的统计,以便实时的准确掌握自己的财务状况.目前此程序已正式上线,大家可以在微信中搜索"小记一笔"点击使用,下面是其中几张效果截图:      准备工作: 1.要开发微信小程序,首先得有工具,可以先去微信公众平台官网(https://mp.

微信小程序开发提升效率

http://www.ifanr.com/minapp/790017 微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法. 众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题.但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装--weapp. 同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理.如果众多的异步操作都直接在 App 或 Page 中一一实现,相信开发起来会很困难,

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

门店小程序开发全过程(附源码)

说到微信小程序的创立初衷,线下门店绝对是应用的大场景,也符合小程序"用完即走"的理念.从这一两年的发展来看,多个小程序爆款也出自门店小程序,如周黑鸭.星巴克以及奶茶店小程序等等.门店小程序的研发需求和使用需求都很大,下边我们就具体讲讲门店小程序的应用场景及研发过程. 一.场景 场景化消费的同时,用户可扫描桌上的二维码,快速展现小程序系统 浏览购买小程序提供的线上服务 留存用户,后期可与用户线上互动,增强用户粘性 即:通过线下导流到线上,线上购买服务,线下体验和享受服务,通过小程序完美实

[转]灯灯小程序开发手记:仿今日头条(上)

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

我们的微信小程序开发

基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够大大降低开发成本和难度,但也意味着需要掌握整个微信小程序的各种接口功能.应用场景等相关技术点,本篇随笔先从大的方面来介绍微信小程序开发的一些知识,如架构设计.技术路线 .工具准备等方面做一些浅薄的介绍,希望大家也有所收益,有所借鉴,则善莫大焉. 1.小程序的统一架构

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil