原生微信小程序购物车

原生微信小程序购物车！！

效果：

html：

<view style="background-color: #eeeeee;height: 100vh;"><view class="product-container"><view class="product-list" style='height:80vh'><view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'><slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'><view class="product-item-wrap"><icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" /><view class="product_img"><image src="{{item.url}}" class='goods-img' mode="widthFix"></image></view><view class="product-movable-item"><view class="goods-name">{{item.name}}</view><view class="goods-type">最新款<text>{{item.style}}</text></view><view class="goods-price">￥{{item.price}}</view></view><view class="product-movable-item product-movable-item-amount"><view class="num-box"><view class="btn-groups"><button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button><input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input><button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button></view></view></view></view></slide-delete></view></view><view class="cart-fixbar"><view class="allSelect"><icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' /><view class="allSelect-text">全选</view></view><view class="count"><text>合计：</text>￥{{count}}</view><view class="order"><view class="orders">去结算<text class="allnum">({{num}})</text></view></view></view>
</view>
</view>

JavaScript:


const app = getApp()
Page({/*** 页面的初始数据*/data: {goodsNum:'',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),slideProductList: [{id:1,name: '智能手环1111111112222211',url: "/assets/images/iconCart.png",style: "2代",price: "149.5",select: "circle",num: "1",code: "0001",amount: 500},{id: 2,name: "指环支架",url: "/assets/images/iconCarts.png",style: "金色",price: "19.9",select: "circle",code: "0002",num: "1",amount: 500},{id: 3,name: "新款平板电脑",url: "/assets/images/recharge.png",style: "9.7英寸",price: "100",select: "circle",code: "0003",num: "1",amount: 110},{id: 4,code: "0001",name: "无人机",url: "/assets/images/triangle_btm.png",style: "低配版",price: "4999",select: "circle",code: "0004",num: "1",amount: 200},{id: 5,code: "0001",name: "无人机",url: "/assets/images/search.png",style: "低配版",price: "4999",select: "circle",code: "0004",num: "1",amount: 200},{id: 6,code: "0001",name: "无人机",url: "/assets/images/Top-up activities.jpg",style: "低配版",price: "4999",select: "circle",code: "0004",num: "1",amount: 200},],allSelect: "circle",num: 0,count: 0,lastX: 0,lastY: 0,text: "没有滑动",},change: function (e) {var that = thisvar index = e.currentTarget.dataset.indexvar select = e.currentTarget.dataset.selectif (select == "circle") {var stype = "success"} else {var stype = "circle"}var newList = that.data.slideProductListnewList[index].select = stypethat.setData({slideProductList: newList})that.countNum()that.count()},addtion: function (e) {var that = thisvar index = e.currentTarget.dataset.indexvar num = e.currentTarget.dataset.num//默认99件if (num < 99) {num++}var newList = that.data.slideProductListnewList[index].num = numthat.setData({goodsNum:num,slideProductList: newList})that.countNum()that.count()},inputNum:function(e){var num = e.detail.value;this.setData({goodsNum:num})},numIputBlur:function(e){var that = thisvar num = that.data.goodsNumvar index = e.currentTarget.dataset.indexvar newList = that.data.slideProductListif (num == "") { //盘空newList[index].num = 1;that.setData({slideProductList: newList})}else if (num < 1) {that.setData({goodsNum: newList[index].num,slideProductList: newList})wx.showToast({title: '亲，该宝贝不能减少了哦~',icon: 'none'})}else if(num>99){that.setData({goodsNum: newList[index].num,slideProductList: newList})wx.showToast({title: '亲，该宝贝最多购买99件哦~',icon: 'none'})}else{newList[index].num = num;that.setData({slideProductList: newList})}that.countNum()that.count()},//减法subtraction: function (e) {var that = thisvar index = e.currentTarget.dataset.indexvar num = e.currentTarget.dataset.numvar newList = that.data.slideProductListif (num == 1) {//当数量为1件时，再次点击移除该商品newList.splice(index, 1)} else {num--newList[index].num = num}that.setData({goodsNum: num,slideProductList: newList})that.countNum()that.count()},//全选allSelect: function (e) {var that = thisvar allSelect = e.currentTarget.dataset.select //先判断是否选中var newList = that.data.slideProductListconsole.log(newList)if (allSelect == "circle") {for (var i = 0; i < newList.length; i++) {newList[i].select = "success"}var select = "success"} else {for (var i = 0; i < newList.length; i++) {newList[i].select = "circle"}var select = "circle"}that.setData({slideProductList: newList,allSelect: select})that.countNum()that.count()},countNum: function () { //计算数量var that = thisvar newList = that.data.slideProductListvar allNum = 0for (var i = 0; i < newList.length; i++) {if (newList[i].select == "success") {allNum += parseInt(newList[i].num)}}parseIntthat.setData({num: allNum})},count: function () {//计算金额方法var that = thisvar newList = that.data.slideProductListvar newCount = 0for (var i = 0; i < newList.length; i++) {if (newList[i].select == "success") {newCount += newList[i].num * newList[i].price}}that.setData({count: newCount})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var width=wx.getSystemInfoSync().windowWidthvar height=wx.getSystemInfoSync().windowHeightheight=height-55-53;this.setData({height:height})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

css:


.cart-box .item {display:flex;flex-direction:row;align-items:center;padding:20rpx;border-top:8rpx solid #f0f3fa;}
.cart-box .item .goods-info {margin-left:20rpx;}
.goods-img {width:160rpx;margin-left:20rpx;height:160rpx;}
.cart-box .row {color:#fff;display:flex;flex-direction:row;width:430rpx;justify-content:space-between;margin-bottom:10rpx;}
.goods-name {font-size:32rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;padding-bottom:10rpx;width:290rpx;}
.goods-price {font-size:32rpx;color:#e02e24;position:relative;top:14rpx;}
.goods-type {color:#999;font-size:24rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:240rpx;padding-bottom:10rpx;}
.num-box {display:flex;flex-direction:row;justify-content:flex-end;position:relative;top:6rpx;}
.goods-btn {width:44rpx;height:44rpx;padding:0;line-height:40rpx;font-weight:400;color:#fff;margin:0;background:#e60a30;border-radius:50%;}
.num {color:#999;width:50rpx;margin-left:5rpx;margin-right:5rpx;text-align:center;line-height:50rpx;font-size:30rpx;}
.btn-add {font-size:36rpx;}
.btn-minus {font-size:18rpx;background:#f8babb;}
.btn-groups {display:flex;flex-direction:row;justify-content:flex-end;background:#f4f4f4;padding:2rpx;border-radius:10rpx;}
.cart-fixbar {position:fixed;bottom:185rpx;background:#e60a30;height:106rpx;width:95%;margin:0 10rpx;display:flex;flex-direction:row;align-items:center;border-top-left-radius:20rpx;border-top-right-radius:20rpx;}
.cart-box .item:last-child {border-bottom:8rpx solid #f0f3fa;}
.cart-fixbar .allSelect {display:flex;flex-direction:row;height:106rpx;align-items:center;color:#fff;font-size:32rpx;margin-left:20rpx;}
.cart-fixbar .allSelect-text {margin-left:16rpx;font-size:28rpx;}
.cart-fixbar .count {color:#fff;font-size:36rpx;position:absolute;right:220rpx;display:flex;align-items:center;}
.cart-fixbar .count text {font-size:28rpx;}
.cart-fixbar .order {color:#e02e24;height:58rpx;background:#fff;line-height:58rpx;position:absolute;right:0;margin:0 20rpx;font-size:28rpx;border-radius:10rpx;}
.cart-fixbar .orders {padding:0 18rpx;}
.cart-fixbar .allnum {font-size:28rpx;}
.row_boxs {display:flex;align-items:center;}
.goods-type {flex:1;}
.goods-type text {padding-right:10rpx;}
.section {padding-bottom:220rpx;}
.footer {border-top:1rpx solid #eee;position:fixed;bottom:0;width:100%;display:flex;background:#fff;font-size:24rpx;height:55px;align-items:center;}
.footer .ft_item {width:25%;text-align:center;}
.footer .ft_item image {width:44rpx;height:44rpx;margin-top:10rpx;}
.footer .ft_item:nth-child(3) .item_title {color:#e60a30;}
.section_img {width:110rpx;height:110rpx;}
.section_boxs {text-align:center;margin:50% auto 0;}
.cart-box_p,.section_p {text-align:center;font-size:26rpx;padding-top:10rpx;color:#999;}
.cart-box_p {padding-top:60rpx;}
.cart-box_p text {border:1rpx solid #eee;padding:10rpx 24rpx;letter-spacing:1rpx;}
.title {margin:60rpx 0 30rpx;font-size:40rpx;text-align:center;font-weight:bold;color:#383a3d;}
.product-list .product-item {position:relative;width:100vw;border-bottom:10rpx solid #f0f3fa;box-sizing:border-box;background:#fff;z-index:999;}
.slide-product-list .slide-product-item {position:relative;width:100vw;border-bottom:2rpx solid #e9e9e9;box-sizing:border-box;background:#fff;z-index:999;}
.product-list .product-item movable-area {height:120rpx;width:calc(100vw - 120rpx);}
.product-list .product-item movable-view {height:120rpx;width:100vw;background:#fff;z-index:999;}
.product-list .product-item:first-child {border-top:10rpx solid #f0f3fa;}
.product-list .product-item .delete-btn {position:absolute;top:0;bottom:0;right:0;width:120rpx;font-family:PingFangSC-Regular;font-size:24rpx;color:#fff;line-height:120rpx;z-index:1;background:#e66671;text-align:center;}
.product-list .product-item-wrap {position:relative;display:flex;align-items:center;padding:8rpx 0 20rpx 20rpx;box-sizing:border-box;}
.product-list .product-item-wrap .product-movable-item {flex:1;/* overflow:hidden;*/}
.product-list .product-item-wrap .product-movable-item-name {font-family:PingFangSC-Regular;font-size:28rpx;color:#71747a;line-height:60rpx;margin-right:10rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.product-list .product-item-wrap .product-movable-item-code {font-family:PingFangSC-Regular;font-size:24rpx;color:#969aa3;}
.product-list .product-item-wrap .product-movable-item-amount {flex:1;padding-right:50rpx;position:relative;}
.product-list .product-item-wrap .product-movable-item-amount .amount {width:120rpx;font-size:28rpx;color:#383a3d;line-height:60rpx;}
.product-list .product-item-wrap .product-movable-item-amount .unit {position:absolute;top:0;right:30rpx;font-size:28rpx;color:#969aa3;line-height:60rpx;}
.product_img {display:flex;align-items:center;padding-right:20rpx;}
.product-list {display:block;overflow-y:auto;}

该文章html与js部分为转载于风泽木。

原生微信小程序购物车相关推荐

mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
原生微信小程序使用class 三元运算符实现多选案例
原生微信小程序使用class 三元运算符实现多选案例如下图所示: 1,在vue中开发非常容易实现,使用数组的includes方法判断即可,但是在原生小程序中不可以 2,要及时的对定义的遍历进行set ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
【微信小程序】---- redux 在原生微信小程序的使用实例
weapp-redux 下载 weapp-redux 使用实例下载预览开发 1. 目标学会 redux 在原生微信小程序的使用: 学习和思考微信小程序中封装 Provider: 2. 引入 re ...
原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换接口的url webview的前缀url 埋点相关的环境参数本地存储的环境变量配置 ...
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
原生微信小程序,scroll-view的使用,一屏两个滚动区域,scroll-y(纵向滚动) 这个会简单很多结构层 <view class="container">& ...
蚂蚁分类信息系统原生微信小程序百度小程序
蚂蚁分类信息系统原生微信小程序百度小程序,系统采用uniapp开发,小程序接口独立开发,兼容蚂蚁分类信息系统数据库.支持微信支付,百度支付

原生微信小程序购物车

原生微信小程序购物车相关推荐

最新文章

热门文章