微信 小程序组件 加入购物车全套 one js

// pages/shop/shop.js

Page({

/**

* 页面的初始数据

*/

data: {

carts: [

{ teaname: ‘冠军乌龙茶-150g‘, image: ‘../../imgs/car/shopping_pic_1.png‘, num: ‘1‘, price: ‘1200.00‘, sum: ‘1200.0‘, selected: true, cid: 1001, },

{ teaname: ‘18年老茶-150g‘, image: ‘../../imgs/car/shopping_pic_1.png‘, num: ‘1‘, price: ‘600.00‘, sum: ‘600.0‘, selected: true, cid: 1001, },

],

// 实现bindSelectAll事件,改变全选状态

selectedAllStatus: false,

total: ‘‘,

// 页面打开时的短暂加载数据初始化1

newload: ‘‘,

minusStatuses: "disabled",

//判断购物车是否为空时的页面

hasList: true

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.sum();

// 页面打开时的短暂加载函数2

this.newload();

this.minusStatuses();

},

// -------------------------------------------------------------------------------

// 页面打开时的短暂加载函数3

newload: function () {

// wx.showModal({

// title: ‘提示‘,

// content: ‘这是一个模态弹窗‘,

// success: function (res) {

// if (res.confirm) {

// console.log(‘用户点击确定‘)

// } else if (res.cancel) {

// console.log(‘用户点击取消‘)

// }

// }

// })

wx.showLoading({

title: ‘加载中‘,

});

setTimeout(function () {

wx.hideLoading()

}, 1000);

// setTimeout(function () {

// this.setData({

// newload: 1,

// });

// this.data.newload=‘‘

// }, 2000)

},

// -------------------------------------------------------------------------------

// setTimeout(function () {

// animation.translate(30).step()

// this.setData({

// animationData: animation.export()

// })

// }.bind(this), 5000)

// --------------------------------------------------------------------------------

// 减号被禁用时在初始化数据函数

minusStatuses:function(){

var minusStatuses=[];

var length = this.data.carts.length;

for (var i = 0; i < length;i++){

minusStatuses.push("disabled");

}

this.setData({

minusStatuses: minusStatuses

});

},

bindMinus: function (e) {

var index = parseInt(e.currentTarget.dataset.index);

var num = this.data.carts[index].num;

var sum = this.data.carts[index].sum;

var price = this.data.carts[index].price;

console.log(1);

// 如果只有1件了,就不允许再减了

if (num > 1) {

num--;

}

// 只有大于一件的时候,才能normal状态,否则disable状态

var minusStatus = (num <= 1 ? ‘disabled‘ : ‘normal‘);

// 购物车数据

var carts = this.data.carts;

carts[index].num = num;

carts[index].sum = (num * price).toFixed(1);

// 按钮可用状态

var minusStatuses = this.data.minusStatuses;

minusStatuses[index] = minusStatus;

// 将数值与状态写回

this.setData({

carts: carts,

minusStatuses: minusStatuses

});

this.sum();

},

bindPlus: function (e) {

var index = parseInt(e.currentTarget.dataset.index);

var num = this.data.carts[index].num;

var sum = this.data.carts[index].sum;

var price = this.data.carts[index].price;

// console.log(num);

// 自增

num++;

// 只有大于一件的时候,才能normal状态,否则disable状态

var minusStatus = (num <= 1) ? ‘disabled‘ : ‘normal‘;

// 购物车数据

var carts = this.data.carts;

carts[index].num = num;

carts[index].sum = (num * price).toFixed(1);

// 按钮可用状态

var minusStatuses = this.data.minusStatuses;

minusStatuses[index] = minusStatus;

// 将数值与状态写回

this.setData({

carts: carts,

minusStatuses: minusStatuses

});

this.sum();

},

// -----------------------------------------------------------------------------------------

// 单击复选框是否选中

bindCheckbox: function (e) {

/*绑定点击事件,将checkbox样式改变为选中与非选中*/

//拿到下标值,以在carts作遍历指示用

var index = parseInt(e.currentTarget.dataset.index);

//原始的icon状态

var selected = this.data.carts[index].selected;

var carts = this.data.carts;

// 对勾选状态取反

carts[index].selected = !selected;

// 写回经点击修改后的数组

this.setData({

carts: carts

});

this.sum();

},

// ---------------

// 全选复选框是否选中

bindSelectAll: function () {

// 环境中目前已选状态

var selectedAllStatus = this.data.selectedAllStatus;

// 取反操作

selectedAllStatus = !selectedAllStatus;

// 购物车数据,关键是处理selected值

var carts = this.data.carts;

// 遍历

for (var i = 0; i < carts.length; i++) {

carts[i].selected = selectedAllStatus;

}

this.setData({

selectedAllStatus: selectedAllStatus,

carts: carts

});

this.sum();

},

// -----------------------------------------------------------------------------------------

// 全选

bindCheckout: function () {

// 初始化toastStr字符串

var toastStr = ‘cid:‘;

// 遍历取出已勾选的cid

for (var i = 0; i < this.data.carts.length; i++) {

if (this.data.carts[i].selected) {

toastStr += this.data.carts[i].cid;

toastStr += ‘ ‘;

}

}

//存回data

this.setData({

// toastHidden: false,

// toastStr: toastStr

});

},

bindToastChange: function () {

this.setData({

// toastHidden: true

});

},

// -----------------------------------------------------------------------------------------

// 计算总的金额

sum: function () {

var carts = this.data.carts;

// 计算总金额

var total = 0;

for (var i = 0; i < carts.length; i++) {

if (carts[i].selected) {

total += carts[i].num * carts[i].price;

}

}

total = total.toFixed(1);

// 写回经点击修改后的数组

this.setData({

carts: carts,

total: ‘¥‘ + total

});

},

// -----------------------------------------------------------

// 购物车删除

deleteList(e) {

const index = e.currentTarget.dataset.index;

let carts = this.data.carts;

carts.splice(index, 1); // 删除购物车列表里这个商品

this.setData({

carts: carts

});

if (!carts.length) { // 如果购物车为空

this.setData({

hasList: false // 修改标识为false,显示购物车为空页面

});

} else { // 如果不为空

this.sum(); // 重新计算总价格

}

},

// ------------------------------------------------------------------

// 回tabar中的首页

tobackHome: function () {

wx.switchTab({

url: ‘/pages/index/index‘

})

},

// -----------------------------------------------------------

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

时间: 2024-08-03 15:20:23

微信 小程序组件 加入购物车全套 one js的相关文章

微信 小程序组件 加入购物车全套 one wxml

<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="container carts-list"> <view wx:key="isshop" wx:for="{{carts}}" class="carts-item" > <view class="carts-c

微信 小程序组件 加入购物车全套 one wxss

//1,wxss /*外部容器*/ .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } /*整体列表*/ .carts-list { display: flex; flex-direction: column; } /*每行单元格*/ .carts-item { display: flex

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序组件化(上)

小程序对组件化的"支持"情况 微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件.而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. 猜其原因可能有两方面: 从小程序开放的API来看,它去除了DOM和BOM,视图与数据层交互采用简单的单向数据绑定和事件绑的形式.可能其初衷是想降低开发难度和学习门槛,尽量减少概念. 小程序推出时间不到一年,这些功能可能还在完善中. 自定义组件的难点 微信的组件

微信小程序组件通信

父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 <子组件 prop名字='值'></子组件> 2.子父通信 在子组件对应的元素身上绑定原生事件 <button bindtap = 'tapHandler'></button> // 在函数中,触发自定义事件 tapHandler(){ this.triggerEven

微信小程序组件——bindtap和catchtap的区别

了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流. JS冒泡事件:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的(所有祖先元素)中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层 共同点 在微信小程序的事件机制中,bindtap和catchta

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链

微信小程序组件解读和分析:四、icon图标

icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方用到了icon图标,这样方便程序表述程序返回的操作状态,用户一眼就能看出应用返回的意思,提高用户体验,在小程序的组件提供了常用的icon图标,详细使用看下面介绍! icon图标组件用法说明: 在使用的icon的时候,使用icon标签,然后有type属性和size属性, 具体的属性看最后的属性总结,标签的