微信小程序购物车和左侧导航栏
先上实现图
话不多说，直接上代码
cars.js
// const arr = require("../../utils/data");
// pages/cars/cars.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
arr: [],
sumprice:0,
check:false,
allselect:false,
count:0,
i_num:0,
i_price:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let get =wx.getStorageSync('carInfo');
this.setData({
arr:get
})
},
addNum(e) {
if(this.data.allselect==true){
console.log("1123365412563528758748549765453132168");
}
let {num} = e.currentTarget.dataset;
console.log(num+1);
num++;
let {id} = e.currentTarget.dataset;
this.data.arr.forEach((item, index) => {
if (item.id == id) {
item.num = num;
}
})
wx.setStorageSync('carInfo', this.data.arr);
this.setData({
arr: wx.getStorageSync('carInfo'),
})
// this.sumprice()
},
delNum(e) {
let newarr=[];
let x=wx.getStorageSync('carInfo');
// console.log(x);
let {num} = e.currentTarget.dataset;
// console.log(num-1);
let goodsid = e.currentTarget.dataset.id;
// let newcount = wx.getStorageSync('count');
// console.log("商品编号"+goodsid+"减一");
if(num>1){
num--;
}
else{
x.forEach((item,index)=>{
if(item.id!=goodsid){
newarr.push(item);
}
})
let newcount = wx.getStorageSync('carInfo').length
newcount--;
// wx.setStorageSync('count', newcount)
// let c = wx.getStorageSync('count');
this.setData({
count:newcount
})
wx.setStorageSync('carInfo', newarr);
let a=wx.getStorageSync('carInfo');
this.setData({
arr:a
})
// console.log(a);
// console.log(newarr);
// console.log(wx.getStorageSync('carInfo'));
}
let {id} = e.currentTarget.dataset;
this.data.arr.forEach((item, index) => {
if (item.id == id) {
item.num = num;
}
})
wx.setStorageSync('carInfo', this.data.arr);
this.setData({
arr: wx.getStorageSync('carInfo'),
})
let c =wx.getStorageSync('carInfo').length;
wx.setStorageSync('count', c)
let count2=wx.getStorageSync('count')
wx.setTabBarBadge({
index: 2,
text: ""+count2+"",
})
// this.sumprice(e);
},
empty(e){
wx.clearStorageSync('carInfo');
wx.reLaunch({
url: '/pages/cars/cars',
})
},
selectall(e){
let dataArr = this.data.arr.length;
// console.log(dataArr);
for(var i=0;i{
console.log(item.price*item.num);
sum+=item.price*item.num
})
}else{
sum=0;
}
this.setData({
sumprice:sum
})
if(ischeck==true && this.data.allselect==true ){
ischeck=!this.data.allselect;
// console.log(ischeck+"单选");
this.setData({
allselect:!on
})
// console.log(this.data.allselect+"这是全选的值");
}
this.setData({
check:ischeck,
})
this.data.count=0;
// console.log(this.data.allselect+"这是全选的值");
console.log(ischeck+"这是单个复选框的值");
},
allon:function(e){
let count=e.detail.value.length;
// this.setData({
// count:count
// })
// console.log(count);
let dataArr=this.data.arr.length;
let on=true
console.log("选中"+count+"个单选");
console.log("缓存有"+dataArr+"个数据");
// 判断选中，设置全选是否选中
if(count==dataArr){
this.setData({
allselect:on,
})
console.log("全部选择了"+this.data.allselect);
}
else{
this.setData({
allselect:!on,
})
this.data.allselect=false
}
if(count==0){
this.setData({
check:false,
allselect:false
})
this.data.check=false
this.data.allselect=false
}
this.sumprice(e);
},
sumprice(e){
// console.log(e.detail.value);
//这里是计算合计的！！
// console.log(e);
let shopcar= wx.getStorageSync('carInfo');
let sum=0
shopcar.forEach((item,index)=>{
e.detail.value.forEach((item2,index2)=>{
if(item.id==item2){
// console.log(item2);
sum+=item.price*item.num
}
})
})
this.setData({
sumprice:sum
})
},
jiesuan(e){
},
skyOnclick(){
console.log("click this");
// wx.navigateTo 只能跳转到没有在 tabBar 上配置的页面
wx.reLaunch({
url: '../grapefruit/grapefruit',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取页面缓存
var storage = wx.getStorageSync('carInfo');
// this.data.arr.concat(storage);
this.setData({
arr: storage
})
console.log(this.data.arr);
let c =wx.getStorageSync('carInfo').length;
this.setData({
count:c
})
wx.setStorageSync('count', c)
let count2=wx.getStorageSync('count')
wx.setTabBarBadge({
index: 2,
text: ""+count2+"",
})
console.log("购物车商品总数"+c);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
}) cars.wxml
购物车({{count}})
清空购物车
您的购物车空空如也\n
\n
去逛逛
{{item.shop}}>
{{item.names}}
{{item.desc}}▽
一
{{item.num}}
+
￥:
{{filters.toFix(item.num*item.price)}}
结算
合计:￥
{{filters.toFix(sumprice)}}
全选
到底啦！
cars.wxss
/* pages/cars/cars.wxss */
page{
background: rgb(240, 240, 240);
}
.car_item{
background:white;
margin: 0 auto;
width: 87%;
height: 150px;
/* border: 2px solid rgb(137, 135, 235); */
border-radius:10px;
padding: 10px;
margin-top: 10px;
box-shadow: 5px 5px 5px rgb(185, 185, 185);
}
.box_check{
float: right;
}
.top{
background: rgb(255, 217, 0);
position: sticky;
top: 0px;
height: 30px;
z-index: 10000;
}
.footer_check{
float: left;
margin-top:8px ;
margin-left: 15px;
}
.box_footer{
/* font-size: 25px; */
float: right;
background:rgb(253, 116, 81);
padding-left: 10px;
padding-right: 8px;
border: 1px solid rgb(192, 192, 192);
border-radius: 5px;
}
.box_footer .text_footer1{
font-size: 25px;
}
.box_footer .text_footer2{
font-size: 20px;
}
.icon-small-wrp{
display: flex;
align-items: center;
justify-content: center;
float: left;
/* border: 1px solid black; */
height: 100%;
line-height: 100%;
width:15px;
}
.middle .goods{
float: left;
margin-top: 10px;
width: 110px;
height: 110px;
margin-left: 5px;
border-radius: 5px;
}
.middle .shops{
/* margin-top: 1px; */
float: left;
width: 20px;
height: 20px;
}
.middle_text{
margin-left: 15px;
float: left;
margin-top: 30px;
width: 110px;
}
.box_footer{
/* margin-top: 100px; */
float: right;
margin-top: 20px;
}
.box_footer .reduce{
font-size: 14px;
color: white;
}
.box_footer .add{
font-size: 18px;
color: white;
}
.box_footer .addsubnum{
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
background-color: white;
margin-left: 7px;
margin-right: 5px;
}
.footer{
height: 40px;
width: 100%;
background: white;
position: fixed;
right: 0px;
bottom: 0px;
}
.footer_text1{
height: 30px;
/* 文字居中 */
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 70px;
float: right;
margin-right: 20px;
border-radius: 15px;
background: -webkit-linear-gradient(left,rgba(255, 146, 4, 0.945),rgb(255, 81, 0));
/* border:0px solid orange ; */
font-size: 15px;
margin-top: 5px;
}
.footer_text2{
font-size: 14px;
float: right;
margin-right: 20px;
line-height: 40px;
}
.footer_text2_1{
color: orange;
font-size: 20px;
}
.footer_text3{
text-align: center;
width: 100px;
float: right;
color: white;
border-radius: 15px;
padding: 4px;
margin-right: 10px;
background: -webkit-linear-gradient(left,rgb(255, 125, 85),rgb(255, 49, 49));
}
checkbox .wx-checkbox-input{
border-radius: 50%;/* 圆角 */
width: 46rpx; /* 背景的宽 */
height: 46rpx; /* 背景的高 */
}
/* 选中后的 背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: 1rpx solid #f3333e;
background: #f3333e;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
border-radius: 50%;/* 圆角 */
width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
line-height: 40rpx;
text-align: center;
font-size:30rpx; /* 对勾大小 30rpx */
color:#fff; /* 对勾颜色 白色 */
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
.tapimg1{
width:140px;
height: 140px;
}
.hide{
height: 300px;
/* line-height: 500px; */
margin-top: 100px;
text-align: center;
}
.guangguang{
margin-top: 10px;
border: 2px solid rgb(255, 115, 35);
border-radius: 50px;
padding-left:30px;
padding-right:30px;
padding-top: 10px;
padding-bottom: 10px;
}filter.wxs // 这是在文件夹里新建的保留两位小数用的
var filters = {
toFix: function (value) {
return value.toFixed(1) // 此处2为保留两位小数，保留几位小数，这里写几
},
toStr: function (value) {
return value.toString()
},
toNum: function (value) {
return value.toNumber()
},
}
module.exports = {
toFix: filters.toFix,
toStr: filters.toStr,
toNum: filters.toNum,//暴露接口调用
}
classification.js
Page({
data: {
product_list:[
{
id:1001,
names:"西瓜",
url:"/imges/fruit/xigua.png",
desc:"麒麟瓜-5斤",
shop:"每天吃瓜",
price:49.9,
num:1,
},
{
id:1002,
names:"荔枝",
url:"/imges/fruit/lizhi2.png",
desc:"妃子笑-2斤",
shop:"荔即享用",
price:30.3,
num:1,
},
{
id:1003,
names:"芒果",
url:"/imges/fruit/mango.png",
desc:"鸡蛋芒-1斤",
shop:"芒来忙去",
price:9.5,
num:1,
},
{
id:1004,
names:"橙子",
url:"/imges/fruit/orange.png",
desc:"脐橙-2斤",
shop:"橙天想你",
price:21.2,
num:1,
},
{
id:1005,
names:"杨桃",
url:"/imges/fruit/yangtao.png",
desc:"杨桃一箱",
shop:"杨与桃",
price:50.5,
num:1,
},
{
id:1006,
names:"菠萝",
url:"/imges/fruit/boluo.png",
desc:"菠萝-三颗",
shop:"菠",
price:29.9,
num:1,
},
{
id:1007,
names:"葡萄",
url:"/imges/fruit/putao.png",
desc:"葡萄-2斤半",
shop:"葡天盖地",
price:63.4,
num:1,
}
],
swipeArr: [
'/imges/fruit/dianpuhaibao2.png',
'/imges/fruit/dianpuhaibao3.png',
'/imges/fruit/guanggao1.png'
],
menuArr: [
{"id": 0,
"title": "今日特价",
"subArr": [
{
"imgSrc": "/imges/fruit/lizhi2.png",
"imgDesc": "新鲜荔枝",
},
{
"imgSrc": "/imges/fruit/xigua.png",
"imgDesc": "自种西瓜",
},
{
"imgSrc": "/imges/fruit/mango.png",
"imgDesc": "海南金煌芒",
},
{
"imgSrc": "/imges/fruit/orange.png",
"imgDesc": "甜橙",
}
],
},
{"id": 1,
"title": "全城热卖",
"subArr": [{
"imgSrc": "/imges/fruit/yangtao.png",
"imgDesc": "新鲜杨桃",
},
{
"imgSrc": "/imges/fruit/boluo.png",
"imgDesc": "自种植菠萝",
},
{
"imgSrc": "/imges/fruit/putao.png",
"imgDesc": "巨峰葡萄",
}
]
},
{"id": 2,
"title": "会员专享",
"subArr": [{
"imgSrc": "/imges/fruit/yangtao.png",
"imgDesc": "新鲜杨桃",
},
{
"imgSrc": "/imges/fruit/boluo.png",
"imgDesc": "自种植菠萝",
},
{
"imgSrc": "/imges/fruit/putao.png",
"imgDesc": "巨峰葡萄",
}
]
},
{"id": 3,
"title": "减脂专区",
"subArr": [{
"imgSrc": "/imges/fruit/yangtao.png",
"imgDesc": "新鲜杨桃",
},
{
"imgSrc": "/imges/fruit/boluo.png",
"imgDesc": "自种植菠萝",
},
{
"imgSrc": "/imges/fruit/putao.png",
"imgDesc": "巨峰葡萄",
}
],
},
// {
// "id": 4,
// "title": "鲜榨果蔬汁",
// "subArr": [{
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "NFC鲜榨橙汁"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "NFC鲜榨西柚汁"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "猕猴桃复合果汁"
// }
// ]
// },
// {
// "id": 5,
// "title": "经典饮品",
// "subArr": [{
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "巧克力"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "纯牛奶"
// }
// ]
// },
// {
// "id": 6,
// "title": "健康轻食",
// "subArr": [{
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "京味烤鸭鲜蔬卷"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "夏威夷菠萝火山卷"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "火腿芝士羊角"
// },
// {
// "imgSrc": "/images/menu/1-1.jpg",
// "imgDesc": "鸡肉卷"
// }
// ]
// }
],
//
leftId: "left0",
rightId: "right0",
lifeActiveNum: 0,
heightArr: []
},
leftClick(e) {
this.setData({
lifeActiveNum: e.target.dataset.myid,
leftId: "left" + e.target.dataset.myid,
rightId: "right" + e.target.dataset.myid
})
},
// vue中的mounted也没有说白分白的组件熏染完成
onReady() {
let _this = this
setTimeout(() => {
let initArr = [0]; //初始数组
let initNum = 0; //初始数值
const query = wx.createSelectorQuery()
query.selectAll('.rightblock').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
// console.log(res[0]);
res[0].map(val => {
initNum += val.height; //实现高度的累加
initArr.push(initNum) //初始数值加进数组中
})
// console.log(initArr); //拿到每一个height 存起来
_this.setData({
heightArr: initArr
})
})
}, 300)
},
// 右边滚动事件
rightScrollTop(e){
let st=e.detail.scrollTop;
let myarr=this.data.heightArr;
for(let i=0;i=myarr[i]&&st{
console.log(item1);
if(item1.id==id){
item1.num++
i=true;
}
})
if(!i){
this.data.product_list.forEach((item,index)=>{
if(item.id == id){
productData.push(item);
// count++;
// this.setData({
// count:count
// })
}
})
}
}else{
wx.setStorageSync('carInfo',[])
var productData = wx.getStorageSync('carInfo');
this.data.product_list.forEach((item,index)=>{
if(item.id == id){
productData.push(item);
}
})
}
// wx.setStorageSync('count',count);
// console.log(count);
wx.setStorageSync('carInfo', productData);
let c =wx.getStorageSync('carInfo').length;
wx.setStorageSync('count', c)
let count2=wx.getStorageSync('count')
wx.setTabBarBadge({
index: 2,
text: ""+count2+"",
})
},
onShow() {
let c =wx.getStorageSync('carInfo').length;
wx.setStorageSync('count', c)
let count2=wx.getStorageSync('count')
wx.setTabBarBadge({
index: 2,
text: ""+count2+"",
})
}
})
classification.wxml
{{item.title}}
{{item.title}}
品种：{{item.names}}
{{item.desc}}
￥
{{item.price}}
classification.wxss
.main {
background: #efefef;
/* height: 100%; */
height: calc(100vh - calc(100vw/1080*520));
width: 100vw;
}
.left {
width: 25%;
float: left;
/* border-right: 1px solid #666; */
background-color: rgb(230, 230, 230);
height: 700px;
/* height: calc(100vh - calc(100vw/1080*520)); */
box-sizing: border-box;
}
.left view{
/* border-bottom: 1rpx solid #666; */
/* background: rgb(235, 235, 235); */
height: 80rpx;
line-height: 80rpx;
text-align: center;
position: relative;
}
.left view.active{
background-color: #fff;
}
.left view::before{
content: '';
background: rgb(230, 230, 230);
/* border-left: 8rpx; */
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 8rpx;
}
.content .right_images{
border-radius: 5px;
height: 90px;
width: 90px;
}
.left view.active::before{
background: #ff9102;
}
.right{
background-color: #fff;
float: right;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 75%;
height: 700px;
padding: 0 10rpx;
/* background: #efefefef; */
box-sizing: border-box;
/* height: calc(100vh - calc(100vw/1080*520)); */
}
.right .title{
height: 40rpx;
line-height: 40rpx;
}
.content {
background: #fff;
width: 270px;
padding: 10rpx;
box-sizing: border-box;
/* text-align: center; */
margin-top: 10rpx;
/* border: 1px solid black; */
}
.content image{
/* border: 1px solid black; */
float: left;
width: 90px;
height: 90px;
margin-right: 8px;
}
.line{
/* margin: 0 auto; */
width: 250px;
border-top: 1px solid rgb(204, 204, 204);
margin-bottom: 10px;
margin-top: 8px;
}
.content text{
/* border: 1px solid black; */
float: left;
/* text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap; */
}
.right-flex{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.right_title{
text-align: center;
border-radius: 5px;
height: 60rpx;
line-height: 60rpx;
width: 75px;
color: white;
background-color: #ff9102;
margin-top: 5px;
}
.content .text2{
font-size: 14px;
position: relative;
top: 32px;
}
.content .text3{
position: relative;
top: 28px;
}
.content .lijiqiang{
width: 80px;
height: 25px;
line-height: 25px;
border-radius: 25px;
font-size: 15px;
margin-top: 30px;
float: right;
/* position: relative;
bottom: -29px;
right: -28px; */
/* border: 1px solid black; */
text-align: center;
background-color: rgb(255, 0, 64);
color: white;
box-shadow: 1px 1px 5px gray;
}参考的左侧导航栏链接：
微信小程序侧边导航栏 - 简书废话少说，其实就是利用scroll-into-view的id值来进行视图进行的滚动，注意不是选项卡效果，是页面的滚动的效果，相当于html的锚点链接效果。效果： html代码...https://www.jianshu.com/p/8c9107f3dbcc