微信小程序实现商品数量加减案例

最新推荐文章于 2024-08-02 12:20:39 发布

IT实战联盟Lin

最新推荐文章于 2024-08-02 12:20:39 发布

阅读量9.8k

点赞数 5

分类专栏：互联网技术小程序实战移动开发文章标签：微信小程序商品数量加减小程序购物车小程序商品

本文链接：https://blog.csdn.net/zhenghhgz/article/details/89432330

版权

本文介绍了一个使用微信小程序原生代码实现商品数量加减功能的demo，包括页面布局、wcss样式设置和js数据交互。提供addCount、delCount、getCount等核心方法，并展示了实现效果。此外，文章属于微信小程序微商城系列教程，建议从第一篇开始阅读。

摘要由CSDN通过智能技术生成

简介

这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用，很简单哦~~~。

核心js方法说明

addCount（增加数量）
delCount （减少数量）
getCount（获取数量）

实现效果如下图所示：
实现效果.gif

实现步骤

1、页面布局

count.wxml 增加主容器代码和提交button

<!-- 主容器 -->  
  <view class="stepper">  
      <!-- 减号 -->  
      <text class="sign {
  {num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{
  {index}}">-</text>  
      <!-- 数值 -->  
      <input class="number" type="number" bindchange="bindManual" value&