以下是微信小程序做的一个购物车的小项目:
先看首页的效果图:
wxml代码
<!-- 滑动列表 -->
<view class='page-index'>
<scroll-view class='scroll-view scoll-view-fixed' scroll-x scroll-with-animation>
<view bindtap='setActiveIndex' class="scroll-view-item {{activeIndex==index?'active':''}}"
wx:for='{{protype}}' data-index='{{index}}'>{{item}}</view>
</scroll-view>
</view>
<!-- 轮播 -->
<view class='swiper-image'>
<swiper indicator-dots circular autoplay>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src='{{item}}' class='slide-image'></image>
</swiper-item>
</block>
</swiper>
</view>
<!-- 公告 -->
<view class='view-adv'>
<view style="float: left;color:red;">公告:</view>
<swiper class='swiper-adv' autoplay vertical circular>
<swiper-item>
<text>我是笔尖下的画</text>
</swiper-item>
<swiper-item>
<text>刀山火海为你踏</text>
</swiper-item>
<swiper-item>
<text>爱上你的一刹那</text>
</swiper-item>
<swiper-item>
<text>我愿陪你到白发</text>
</swiper-item>
</swiper>
</view>
<!-- 热销商品 -->
<scroll-view class='hot-prod' scroll-x bindscroll="hotProdScroll">
<view class="one-row">
<view class="row-item" wx:for='{{6}}'>
<image src='{{hotprods[index]}}'></image>
<view class="placeholder">热销{{index+1}}</view>
</view>
</view>
<view class="two-row">
<view class="row-item" wx:for='{{5}}'>
<image src='{{hotprods[6+index]}}'></image>
<view class="placeholder">热销{{index+1+6}}</view>
</view>
</view>
</scroll-view>
<!-- 滚动条 -->
<view class='prod-progress'>
<view class='progress-outer'>
<view class='progress-inner' style='margin-left:{{hotProdMarginLeft}}px'></view>
</view>
</view>
<!-- 商品列表 -->
<view class='goods-container'>
<view class='goods-item' wx:for='{{goods}}'>
<view class='goods-image'>
<image src='{{item.pic}}'></image>
</view>
<view class='goods-name'>{{item.name}}</view>
<view class='goods-price'>¥{{item.price}}</view>
</view>
</view>
wxss代码
/* 顶部滑动列表css */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.scroll-view {
white-space: nowrap;
}
.scoll-view-fixed {
position: fixed;
top: 0;
background-color: #fff;
z-index: 1000;
}
.scroll-view .scroll-view-item {
display: inline-block;
height: 30px;
line-height: 33px;
margin: 0 24rpx;
}
.scroll-view-item.active {
border-bottom: 2px solid red;
}
.swiper-image {
margin-top: 35px;
}
/* 轮播css */
.slide-image {
width: 100%;
height: 100%;
}
/* 公告css */
.view-adv {
padding-top: 8px;
padding-left: 20rpx;
}
.swiper-adv {
color: blue;
height: 30px;
width: 200px;
display: inline-block; /* 行块级 */
}
/* 热销商品信息*/
.hot-prod {
white-space: nowrap;
font-size: 26rpx;
}
.hot-prod .row-item {
display: inline-block;
padding: 10rpx 35rpx;
text-align: center;
}
.hot-prod .row-item image {
display: block;
margin: 10rpx auto;
width: 80rpx;
height: 80rpx;
}
/* 滚动条css */
.prod-progress {
padding: 20px;
}
.progress-outer, .progress-inner {
width: 50%;
margin: auto;
background-color: #ddd;
height: 4px;
border-radius: 5px;
}
.progress-inner {
background-color: #e02e24;
width: 50%;
}
/* 商品列表 */
.goods-container {
padding: 15px;
background-color: whitesmoke;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 13px;
}
.goods-item {
width: 47%;
height: 100%;
background-color: white;
margin-bottom: 24rpx;
box-sizing: border-box;
overflow: hidden;
}
.goods-image {
width: 100%;
height: 260px;
overflow: hidden;
}
.goods-image image {
width: 100%;
height: 100%;
}
.goods-name {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 15rpx 10rpx;
color: blue;
}
.goods-price {
color: red;
padding: 0rpx 10rpx;
}
js代码
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
protype: ['热销', '集成灶', '蒸箱烤箱', '水槽', '夏季焕新', '生鲜食品', '美妆服饰', //商品分类
'家居家电', '新鲜水果', '品质家纺', '酒水饮料', '美容护肤', '家用电器', '内衣鞋袜', '休闲零食'
],
activeIndex: 0, //默认选中的项
imgUrls: [ //轮播的图片
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/banner/1.jpg',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/banner/2.jpg',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/banner/3.jpg',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/banner/4.jpg',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/banner/5.jpg',
],
hotprods: [ //热销的图片
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/1.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/2.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/3.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/4.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/5.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/6.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/7.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/8.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/9.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/10.png',
'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/hotprod/11.png',
],
hotProdMarginLeft: 0, //热销商品滚动条左边距
goods: [{
name: '御泥坊男士黑茶清爽控油矿物泥浆面膜去黑头祛痘收缩毛孔补水新品',
price: 579,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/1.jpg',
},
{
name: '台湾欣兰黑里透白冻膜225g竹炭清洁收缩毛孔温和去黑白头面膜',
price: 199,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/2.jpg',
},
{
name: 'SHERO CHING',
price: 179,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/3.jpg',
},
{
name: 'jgrwqwsaskoukjkmvgr',
price: 549,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/4.jpg',
},
{
name: 'asdwokfdmliebiubnmxzw',
price: 129,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/5.jpg',
},
{
name: '5245875278245724528',
price: 299,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/6.jpg',
},
{
name: '【两瓶420】【欣欣】佑珍提拉面膜紧致改善细纹抬头法令纹去黄',
price: 219,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/7.jpg',
},
{
name: '韩国A. by Bom超能婴儿叶子面膜冰凝叶清凉舒缓补水保湿10片包邮',
price: 139,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/8.jpg',
},
{
name: '手串手串手串',
price: 179,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/9.jpg',
},
{
name: 'Bershka 女士 2017秋冬新款粉色飞行员夹克短外套',
price: 779,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/10.jpg',
},
{
name: '御泥坊清爽平衡泥浆面膜清洁 男女泥膜收缩毛孔 去黑头竹炭火山泥',
price: 499,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/11.jpg',
},
{
name: '御泥坊美白嫩肤蚕丝面膜20片男女蚕丝玻尿酸面膜补水美白淡斑保湿',
price: 799,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/12.jpg',
},
{
name: '御泥坊蜂蜜矿物睡眠面膜免洗滋润补水保湿护肤化妆正品男女包邮',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/13.jpg',
},
{
name: '御泥坊清润莹亮黑面膜控油收缩毛孔深清洁玻尿酸男女补水保湿面膜',
price: 399,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/14.jpg',
},
{
name: '御泥坊美白嫩肤黑面膜贴女士蚕丝玻尿酸祛斑面膜补水美白淡斑保湿',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/15.jpg',
},
{
name: '御泥坊人参矿物蚕丝面膜7片*3盒 紧致抗皱去皱淡化细纹补水正品女',
price: 499,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/16.jpg',
},
{
name: '御泥坊玫瑰滋养睡眠面膜免洗补水保湿护肤品夜间男女学生收缩毛孔',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/17.jpg',
},
{
name: '御泥坊红豆薏米面膜100g提亮肤色改善暗黄红润调理泥膜正品女包邮',
price: 449,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/18.jpg',
},
{
name: '御泥坊旗舰店葡萄籽美白淡斑祛黄黑面膜套21片 清洁补水保湿嫩肤',
price: 559,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/19.jpg',
},
{
name: '御泥坊水润黑白面膜贴补水保湿收缩毛孔亮肤玻尿酸护肤套装正品女',
price: 599,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/20.jpg',
},
{
name: '御泥坊小迷糊阿狸加菲猫玻尿酸秋季补水保湿亮肤黑面膜花瑶花男女',
price: 559,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/21.jpg',
},
],
},
setActiveIndex(e) {
this.setData({
activeIndex: e.currentTarget.dataset.index
});
},
// 热销商品的滚动条监听事件
hotProdScroll(e) {
this.setData({
hotProdMarginLeft: e.detail.scrollLeft * 1.3
});
}
})
以上是首页的效果以及代码
下面来看商品分类的页面效果及代码:
wxml
<!-- 搜索框 -->
<view class='page-goods'>
<view class='goods-search-container'>
<navigator class='search-box' url="../search/search">
<image src='/images/search.png'></image>
搜索商品
</navigator>
</view>
</view>
<!-- 商品分类 -->
<view class='goods-type-container'>
<view class='goods-sider-bar'>
<scroll-view class='goods-scroll' scroll-y style='height:{{leftHeight}}px'>
<view bindtap='setActiveIndex' data-index='{{index}}' class='goods-type-item {{activeIndex==index?"active":""}}' wx:for='{{protype}}'>{{item}}</view>
</scroll-view>
</view>
<view class='goods-list'>
<scroll-view class='goods-list' scroll-y style='height:{{leftHeight}}px'>
<view class='goods-list-item' wx:for='{{goods}}'>
<view class='goods-image'>
<image src='{{item.pic}}'></image>
</view>
<view class='goods-info'>
<view class='title'>{{item.name}}</view>
<view class='price'>已售
<text style='color:red;'>0</text> 件</view>
<view>
<text style='color:red;font-weight:bold;'>¥{{item.price}}</text>
<text class='original-price'>¥{{item.original}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
wxss代码
/*商品搜索*/
.goods-search-container {
background-color: #eee;
padding: 20rpx;
}
.search-box {
border: 1px solid #ddd;
background-color: #fff;
height: 70rpx;
line-height: 70rpx;
border-radius: 3px;
text-align: center;
}
.search-box image {
width: 40rpx;
height: 40rpx;
vertical-align: middle;
}
/* 商品分类 */
.goods-type-container {
display: flex;
}
.goods-sider-bar {
background-color: #eee;
width: 250rpx;
overflow: hidden;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.goods-list {
background-color: #fff;
flex: 1;
padding: 20rpx;
}
.goods-type-item {
padding: 25rpx 20rpx;
background-color: #F5F5F5;
}
.active {
background-color: #fff;
}
/*商品列表信息*/
.goods-list {
background-color: #fff;
flex: 1;
padding: 20rpx;
overflow: hidden;
box-sizing: border-box;
}
.goods-list-item {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.goods-list-item .goods-image {
width: 200rpx;
height: 200rpx;
line-height: 200rpx;
}
.goods-list-item .goods-image image {
width: 100%;
height: 100%;
}
.goods-list-item .goods-info {
flex: 1; /*剩下的填满*/
padding-left: 10px;
position: relative;
overflow: hidden;
}
.goods-list-item .goods-info::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 10px;
height: 1px;
background-color: #ddd;
width: 235rpx;
}
.goods-info view {
padding: 3px 0;
}
.goods-info .title {
font-size:26rpx;
width: 220rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: blue;
}
.goods-info .price {
font-size: 24rpx;
}
/* 原价的样式,有删除线 */
.original-price {
color: #777;
font-size: 20rpx;
padding-left: 20rpx;
text-decoration: line-through;
}
js代码
Page({
/**
* 页面的初始数据
*/
data: {
protype: [
"热销", "集成灶", "蒸箱烤箱", "水槽", "夏季焕新", "生鲜食品", "美妆服饰", "家居家电",
"新鲜水果", "品质家纺", "酒水饮料", "美容护肤", "家用电器", "内衣鞋袜", "休闲零食"
], //类别名称
goods: [{
name: '御泥坊男士黑茶清爽控油矿物泥浆面膜去黑头祛痘收缩毛孔补水新品',
price: 579,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/1.jpg',
original: 899
},
{
name: '台湾欣兰黑里透白冻膜225g竹炭清洁收缩毛孔温和去黑白头面膜',
price: 199,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/2.jpg',
original: 399
},
{
name: 'SHERO CHING',
price: 179,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/3.jpg',
original: 499
},
{
name: 'jgrwqwsaskoukjkmvgr',
price: 549,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/4.jpg',
original: 799
},
{
name: 'asdwokfdmliebiubnmxzw',
price: 129,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/5.jpg',
original: 399
},
{
name: '5245875278245724528',
price: 299,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/6.jpg',
original: 599
},
{
name: '【两瓶420】【欣欣】佑珍提拉面膜紧致改善细纹抬头法令纹去黄',
price: 219,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/7.jpg',
original: 399
},
{
name: '韩国A. by Bom超能婴儿叶子面膜冰凝叶清凉舒缓补水保湿10片包邮',
price: 139,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/8.jpg',
original: 399
},
{
name: '手串手串手串',
price: 179,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/9.jpg',
original: 599
},
{
name: 'Bershka 女士 2017秋冬新款粉色飞行员夹克短外套',
price: 779,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/10.jpg',
original: 999
},
{
name: '御泥坊清爽平衡泥浆面膜清洁 男女泥膜收缩毛孔 去黑头竹炭火山泥',
price: 499,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/11.jpg',
original: 699
},
{
name: '御泥坊美白嫩肤蚕丝面膜20片男女蚕丝玻尿酸面膜补水美白淡斑保湿',
price: 799,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/12.jpg',
original: 999
},
{
name: '御泥坊蜂蜜矿物睡眠面膜免洗滋润补水保湿护肤化妆正品男女包邮',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/13.jpg',
original: 999
},
{
name: '御泥坊清润莹亮黑面膜控油收缩毛孔深清洁玻尿酸男女补水保湿面膜',
price: 399,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/14.jpg',
original: 999
},
{
name: '御泥坊美白嫩肤黑面膜贴女士蚕丝玻尿酸祛斑面膜补水美白淡斑保湿',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/15.jpg',
original: 999
},
{
name: '御泥坊人参矿物蚕丝面膜7片*3盒 紧致抗皱去皱淡化细纹补水正品女',
price: 499,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/16.jpg',
original: 999
},
{
name: '御泥坊玫瑰滋养睡眠面膜免洗补水保湿护肤品夜间男女学生收缩毛孔',
price: 699,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/17.jpg',
original: 999
},
{
name: '御泥坊红豆薏米面膜100g提亮肤色改善暗黄红润调理泥膜正品女包邮',
price: 449,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/18.jpg',
original: 899
},
{
name: '御泥坊旗舰店葡萄籽美白淡斑祛黄黑面膜套21片 清洁补水保湿嫩肤',
price: 559,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/19.jpg',
original: 999
},
{
name: '御泥坊水润黑白面膜贴补水保湿收缩毛孔亮肤玻尿酸护肤套装正品女',
price: 599,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/20.jpg',
original: 999
},
{
name: '御泥坊小迷糊阿狸加菲猫玻尿酸秋季补水保湿亮肤黑面膜花瑶花男女',
price: 559,
pic: 'https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/goods/21.jpg',
original: 999
},
],
activeIndex: 0, //激活列表
windowHeight: 0, //窗体的高度
leftHeight: 0, //除了搜索框剩余的高度
},
setActiveIndex(e) {
this.setData({
activeIndex: e.target.dataset.index
});
},
onLoad: function(options) {
var sysInfo = wx.getSystemInfoSync() //获取屏幕高度,导航栏和底部工具之间的高度
var _wHeight = sysInfo.windowHeight; //创建查询器
var query = wx.createSelectorQuery(); //查询元素
var searchBox = query.select('.goods-type-container');
var that = this;
searchBox.boundingClientRect(function(rect) {
var height = rect.height;
that.setData({
windowHeight: _wHeight, // windowHeight
leftHeight: _wHeight - height, //剩余高度
})
}).exec();
},
})
以上是分类页面的效果以及代码
接下来看购物车的页面效果及代码:
wxml代码
<view>
<!-- 头部 -->
<view class='goodhead'>
<view class='title'>购物车 {{userInfo}}</view>
<view class='shopnum'>{{cargoods.length}}件</view>
</view>
<!-- 购物车内容 -->
<view class="weui-panel__bd">
<scroll-view scroll-x wx:for='{{cargoods}}' wx:key='key'>
<view url="" class="weui-media-box weui-media-box_appmsg">
<view class='checkbox'>
<image data-index='{{index}}' data-id='{{index}}' src='{{item.isBuy? "/images/gou.png":"/images/gou-red.png"}}' bindtap='radio'></image>
</view>
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg goodsimg">
<image class="weui-media-box__thumb" src="{{item.pic}}" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">{{item.name}}</view>
<view class="weui-media-box__desc">
<view class='shoppic'>¥{{item.price}}</view>
<view class='nums'>
<view class='numjia' bindtap='delNumber' data-index='{{index}}'>-</view>
<view class='number'>{{item.numbers}}</view>
<view class='numjian' bindtap='addNumber' data-index='{{index}}'>+</view>
</view>
</view>
</view>
<view class='btn-delete' data-index='{{index}}' catchtap='removeGoods'>删除</view>
</view>
</scroll-view>
</view>
<view style='height:46px;'></view>
<!-- 底部 -->
<view wx:if='{{cargoods.length==0}}'>
<navigator url='/pages/homepage/homepage' open-type='switchTab' style='padding:100rpx 20rpx;'>
购物车空空如也,赶紧去挑选你心意的产品吧~~~~~
</navigator>
</view>
<view class='goods-footer'>
<view class='botimg'>
<image src='{{selectAll?" https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/gou.png":" https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/gou-red.png"}}' bindtap='selectAll'></image>
<text style='padding-left:20rpx;'>全选</text>
</view>
<view class='settlement'>
<button type='warn' disabled='{{totalPrice==0}}'>去结算</button>
<text style='color:red;padding:0 10px;float:right;line-height: 92rpx;'>合计:¥{{totalPrice}}</text>
</view>
</view>
</view>
wxss代码
.goodhead {
background-color: #efefef;
height: 80rpx;
line-height: 80rpx;
padding: 0 20rpx;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.goodhead .shopnum {
float: right;
}
.goodhead .title {
float: left;
}
.weui-media-box__desc {
display: inline-block;
width: 380rpx;
}
.checkbox {
padding: 0 30rpx;
}
.goodsimg {
width: 180rpx;
height: 180rpx;
}
.shoppic {
float: left;
color: #e64340;
line-height: 50px;
}
.weui-media-box__title {
width: 380rpx;
height: 90rpx;
white-space: nowrap;
text-overflow: ellipsis;
padding: 10px 0;
}
.nums {
float: right;
border: 1px solid #ccc;
border-radius: 3px;
color: black;
font-size: 28rpx;
}
.weui-media-box {
padding: 0;
width: 875rpx;
border-bottom: 1px solid #ccc;
}
.numjia, .numjian {
float: left;
padding: 0 18rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #efefef;
}
.number {
float: left;
border: 1px solid #ccc;
padding: 0 8px;
height: 60rpx;
line-height: 60rpx;
border-top: none;
border-bottom: none;
}
.checkbox image, .botimg image {
width: 50rpx;
height: 50rpx;
vertical-align: middle;
}
.botimg {
line-height: 92rpx;
padding-left: 50rpx;
float: left;
}
.goods-footer {
border-top: 1px solid #ddd;
background-color: #efefef;
position: fixed;
bottom: 0;
width: 100%;
}
.settlement button {
display: inline-block;
float: right;
}
.settlement {
width: 70%;
float: right;
}
.btn-delete {
float: right;
border-radius: 0;
font-size: 30rpx;
box-sizing: border-box;
width: 60px;
background-color: #e64340;
color: #fff;
text-align: center;
height: 260rpx;
line-height: 260rpx;
}
js代码
// pages/shoppingcart/shoppingcart.js
Page({
/**
* 页面的初始数据
*/
data: {
moveLength: [0, 0, 0, 0], //移动的长度
moveStartX: [0, 0, 0, 0], //x轴移动的起点
windowWidth: 0, //窗体的宽度
cargoods: [], //新数组
selectAll: true, //全选
totalPrice: 0, //总价
},
//移动开始
moveStart(e) {
var index = e.currentTarget.dataset.index;
var key = "moveStartX[" + index + "]"
this.setData({
//这个地方的算法有点复杂,当前坐标pageX+当前的元素移动的位置moveLength,才能保证同步移动,要考虑元素的偏移量
[key]: e.touches[0].pageX - this.data.moveLength[index]
});
},
//移动中
moving(e) {
var index = e.currentTarget.dataset.index;
var key = "moveLength[" + index + "]"
//获取移动的距离
var length = e.changedTouches[0].pageX - this.data.moveStartX[index];
this.setData({
[key]: length
});
},
//移动结束
moveEnd(e) {
var index = e.currentTarget.dataset.index;
var key = "moveLength[" + index + "]"
//最终移动的长度
var len = e.changedTouches[0].pageX - this.data.moveStartX[index]
//向左移动超过了60px
if (len < -60) {
len = -60; //显示删除按钮
} else if (len == 0 || this.data.moveLength[index] == -60) {
//由于点击时也会触发 bindtouchstart和bindtouchend事件,此时很有可能没有移动或是moveLength初始值-60的情况
//这种情况不做任何的操作
return;
} else {
len = 0; //隐藏删除按钮
}
this.setData({
[key]: len
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var app = getApp();
var globalData = app.globalData
var sycInfo = wx.getStorageInfoSync()
this.setData({
cargoods: globalData.cargoods,
})
},
// 总价
totalPrice() {
var tempGoods = this.data.cargoods; //获取数组
var totalPrice = 0;
totalPrice = tempGoods.reduce(function(total, current) {
if (!current.isBuy) {
return total + current.price * current.numbers;
} else {
return total;
}
}, 0)
return parseFloat(totalPrice.toFixed(2))
},
// 单选
radio(e) {
var index = parseInt(e.currentTarget.dataset.index)
var goods = this.data.cargoods[index]
var key = 'cargoods[' + index + '].isBuy'
//设置购买状态
this.setData({
[key]: !goods.isBuy,
})
// 是否全选
var aa = this.data.cargoods.find(element => element.isBuy == true) //在数组中找到
if (aa) {
this.setData({
selectAll: true
})
} else {
this.setData({
selectAll: false
})
}
//总价重新结算
this.setData({
totalPrice: this.totalPrice()
})
},
//全选、反选
selectAll(e) {
var check = !this.data.selectAll
this.setData({
selectAll: check
})
var goods = this.data.cargoods
var len = goods.length
for (var i = 0; i < len; i++) {
var key = 'cargoods[' + i + '].isBuy'
this.setData({
[key]: check, // [key] 是 es5中的计算属性命名,将变量的内容作为key
})
}
//总价重新结算
this.setData({
totalPrice: this.totalPrice()
})
},
//增加数量
addNumber(e) {
var index = e.currentTarget.dataset.index
var goods = this.data.cargoods[index];
var key = 'cargoods[' + index + '].numbers';
this.setData({
[key]: goods.numbers + 1, // [key] 是 es5中的计算属性命名,将变量的内容作为key
})
this.setData({
totalPrice: this.totalPrice()
})
},
//减少数量
delNumber(e) {
var index = e.currentTarget.dataset.index
var goods = this.data.cargoods[index];
if (goods.numbers == 1) { //数量停止--
return;
}
var key = 'cargoods[' + index + '].numbers';
this.setData({
[key]: goods.numbers - 1, // [key] 是 es5中的计算属性命名,将变量的内容作为key
})
this.setData({
totalPrice: this.totalPrice()
})
},
//删除操作
removeGoods(e) {
var index = e.currentTarget.dataset.index
this.data.cargoods.splice(index, 1)
// 删除后如果全部选中则全选
var del = this.data.cargoods.find(arr => arr.isBuy == false)
if (del) {
this.data.selectAll = false
} else {
this.data.selectAll = true
}
this.setData({
cargoods: this.data.cargoods
})
this.setData({
totalPrice: this.totalPrice()
})
},
})
以上是购物车的效果以及代码
再来看个人中心的页面效果及代码:
wxml代码
<view class='user-center'>
<view class='user-header'>
<view class='user-avatar'>
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</view>
</view>
<view class='my-order'>
<view class="weui-cells weui-cells_after-title">
<navigator class="weui-cell">
<view class="weui-cell__bd">我的订单</view>
<view class="weui-cell__ft orders">全部订单
<image class='img-more' src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/more.png"></image>
</view>
</navigator>
</view>
<view class="weui-flex order-list">
<view class="weui-flex__item">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/order/fukuan.png"></image>
<view class="placeholder">待付款</view>
</view>
<view class="weui-flex__item">
<image src='https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/order/fahuo.png'></image>
<view class="placeholder">待发货</view>
</view>
<view class="weui-flex__item">
<image src='https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/order/shouhuo.png'></image>
<view class="placeholder">待收获</view>
</view>
<view class="weui-flex__item">
<image src='https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/order/pingjia.png'></image>
<view class="placeholder">待评价</view>
</view>
<view class="weui-flex__item">
<image src='https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/order/wancheng.png'></image>
<view class="placeholder">已完成</view>
</view>
</view>
</view>
<view class="weui-cells weui-cells_after-title">
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/my-info/myquan.png" class='icon'></image>
</view>
<view class="weui-cell__bd">我的优惠券</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/my-info/tuikuan.png" class='icon'></image>
</view>
<view class="weui-cell__bd">退款/售后</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/my-info/dizhi.png" class='icon'></image>
</view>
<view class="weui-cell__bd">收货地址</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/my-info/kefu.png" class='icon'></image>
</view>
<view class="weui-cell__bd">官方客服</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="https://123456-1257659666.cos.ap-guangzhou.myqcloud.com/images/my-info/shezhi.png" class='icon'></image>
</view>
<view class="weui-cell__bd">设置</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">联系我们</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</view>
wxss代码
/* 个人信息 */
.user-center {
font-size: 32rpx;
}
.user-header {
background: linear-gradient(to right,greenyellow, red , blue,aqua);
color: white;
width: 99.8%;
height: 300rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
margin: 18rpx 0;
}
/* 订单信息 */
.orders {
color: #e02e24;
}
.orders .img-more {
width: 35rpx;
height: 35rpx;
position: relative;
top: 2px;
}
.order-list .weui-flex__item {
text-align: center;
font-size: 30rpx !important;
}
.order-list .weui-flex__item image {
display: block;
margin: 10rpx auto;
width: 40rpx;
height: 40rpx;
}
.divider {
background-color: #eee;
height: 30rpx;
line-height: 30rpx;
}
/* 功能列表 */
.icon {
margin-right: 5px;
vertical-align: middle;
width: 20px;
height: 20px;
}