这个小案例里面有购物车的加减，全选，总价，总数，swiper,详情，对于初学微信小程序的小伙伴们,希望对你们能够有帮助哦。
-
如何小伙伴们要写本地数据的话可以写在app.js里面哦，
-
首先在主文件夹里面的app.json里面写上tabBar
- 这个里面有点击图片选中与没选中的生僻单词，一定要记住哦
"tabBar": {
"list": [
{
"iconPath": "./image/12.png",
"selectedIconPath": "./image/11.png",
"pagePath": "pages/shopcar/home/home",
"text": "首页"
},
{
"iconPath": "./image/32.png",
"selectedIconPath": "./image/31.png",
"pagePath": "pages/shopcar/car/car",
"text": "购物车"
},
{
"iconPath": "./image/42.png",
"selectedIconPath": "./image/41.png",
"pagePath": "pages/shopcar/my/mine",
"text": "我的"
}
]
},
-
在shopcar文件夹里面建好文件夹
-
home>details >car>mine
- home.wxml
<view class="box">
<!-- swiper -->
<view class="image">
<swiper circular="{{circular}}" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgList}}" vx:for-item="item">
<swiper-item class="swiper">
<image src="{{item.img}}" class="slide-image"
width="355" height="550"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 购物车部分 -->
<view class="shopcar">
<scroll-view>
<view class="list" wx:for="{{shopcar}}" wx:for-item="item" bindtap="goDetail" data-id="{{item.id}}">
<view class="imgs"> <image src="{{item.img}}"/></view>
<view class="center">
<view>{{item.title}}</view>
<view>温馨提示:{{item.title1}}</view>
<view class="price">￥{{item.price}}</view>
<!-- <view class="btn">
<text>+</text>
<view>0</view>
<text>-</text>
</view> -->
</view>
<!-- <button>删除</button> -->
</view>
</scroll-view>
</view>
</view>
- home.js
// pages/shopcar/home/home.js
let app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imgList:[], //swiper数据
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 1000,
circular:true , //无缝
shopcar:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let imgs = app.globalData.imgs;
let shopcar=app.globalData.shopcar;
this.setData({
imgList:imgs,
shopcar:shopcar
})
},
goDetail(e){ //跳转详情
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/shopcar/details/details?id='+id+'',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- home.wxss
.box{
height:100%;
width:100%;
}
.img{
height:550rpx;
width:100%;
}
.swiper{
height:550rpx;
width:100%;
}
.swiper image{
height:550rpx;
width:100%;
}
.shopcar{
width:100%;
background: #eee;
}
.list{
height:350rpx;
width:100%;
display: flex;
margin:5rpx;
background: #fff;
align-items: center;
}
.list .imgs{
height:340rpx;
width:310rpx;
border:1px soid #ccc;
margin-top:12rpx;
}
.list .imgs image{
height:100%;
width:100%;
}
.center{
height:320rpx;
flex:1;
margin-left:10rpx;
margin-top:10rpx;
padding:0px 10rpx;
box-sizing: border-box;
}
.center view{
line-height:2;
}
.center .btn{
width:200rpx;
height:100rpx;
display:flex;
}
.center .price{
color:red;
margin-left:10rpx;
}
.list .btn{
margin-left:-25rpx;
}
.list .btn text{
height:70rpx;
width:70rpx;
background: deepskyblue;
line-height: 72rpx;
display: block;
border-radius: 50%;
text-align: center;
color:#fff;
margin:0px 20rpx;
}
.list .btn view{
margin-top:-10rpx;
}
.list button{
height:70rpx;
width:270rpx;
font-size:38rpx;
line-height:70rpx;
}
- detail.wxml
<view class="list">
<view class="imgs"> <image src="{{list.img}}"/></view>
<view class="center">
<view>{{list.title}}</view>
<view>温馨提示:{{list.title1}}</view>
<view class="price">￥{{list.price}}</view>
<view class="btn">
<text bindtap="addCount" data-count="{{count+1}}">+</text>
<view>{{count}}</view>
<text bindtap="deleteCount" data-count="{{count-1}}">-</text>
</view>
<button bindtap="goShopcar">加入购物车</button>
</view>
</view>
- detail.js
// pages/shopcar/details/details.js
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
list:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options)
let details = app.globalData.shopcar;
let id=JSON.parse(options.id);
let that=this;
this.setData({
list:details[id],
count:1,
})
},
goCar(e){ //加入购物车
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/shopcar/car/car?id='+id+'',
})
},
addCount(e){ //点击详情页加减
// console.log(e.currentTarget.dataset.count,"2222")
let con = e.currentTarget.dataset.count;
this.setData({
count:con
})
},
deleteCount(e) { //点击详情页加减
// console.log(e.currentTarget.dataset.count,"2222")
let con = e.currentTarget.dataset.count;
this.setData({
count: con,
})
},
goShopcar(e){
let id = e.currentTarget.dataset.id;
wx.switchTab({
url: '/pages/shopcar/car/car?id='+id+'',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- detail.wxss
.box{
height:100%;
width:100%;
}
.list{
height:320rpx;
width:100%;
display: flex;
margin:5rpx;
background: #fff;
align-items: center;
}
.list .imgs{
height:340rpx;
width:310rpx;
border:1px soid #ccc;
margin-top:12rpx;
}
.list .imgs image{
height:100%;
width:100%;
}
.center{
height:320rpx;
flex:1;
margin-left:10rpx;
margin-top:10rpx;
padding:0px 10rpx;
box-sizing: border-box;
}
.center view{
line-height:2;
}
.center .btn{
width:200rpx;
height:100rpx;
display:flex;
}
.center .price{
color:red;
margin-left:10rpx;
}
.list .btn{
margin-left:-25rpx;
}
.list .btn text{
height:70rpx;
width:70rpx;
background: deepskyblue;
line-height: 72rpx;
display: block;
border-radius: 50%;
text-align: center;
color:#fff;
margin:0px 20rpx;
}
.list .btn view{
margin-top:-10rpx;
}
.list button{
height:70rpx;
width:270rpx;
font-size:38rpx;
line-height:70rpx;
}
- car.wxml
<view class="box">
<!-- 购物车上面 -->
<view class="shopcar" wx:for="{{list}}" wx:key="{{index}}" wx-item="{{item}}">
<view class="clickFned" bindtap="clickFned" data-id="{{item.id}}" >
<icon type="success" color="red" wx:if="{{item.checked}}"></icon>
<icon type="circle" wx:else></icon>
</view>
<view class="center">
<view class="list_item">
<image src="{{item.img}}"/>
<view class="prices">
<view>标题:{{item.title}}</view>
<view>价格:{{item.price}}</view>
</view>
</view>
</view>
<view class="counts">
<button bindtap="addClick" data-id="{{item.id}}" data-coun="{{item.num+1}}">+</button>
<text>{{item.num}}</text>
<button bindtap="addClick" data-id="{{item.id}}" data-coun="{{item.num-1}}">-</button>
</view>
</view>
<!-- 下面的全选 -->
<view class="bottom">
<view bindtap="allChecked">
<icon type="success" color="red" wx:if="{{selectAll}}"></icon>
<icon type="circle" wx:else></icon>
</view>
<view>总数:</view>
<view>总价:{{allNum}}</view>
</view>
</view>
- car.js
// pages/shopcar/car/car.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
list: [],
selectAll: false, //全选
allNum: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this
that.setData({ //原始数据
list: app.globalData.shopcar
})
},
allChecked() { //全选
let selectAll = this.data.selectAll;
let list = this.data.list;
for (let i = 0; i < list.length; i++) {
list[i].checked = !selectAll
// if (list[i].checked){
// this.allPrice()
// }
}
this.setData({
selectAll: !selectAll,
list,
})
},
//单选
clickFned(e) {
let id = e.currentTarget.dataset.id;
let list = this.data.list;
let selectAll = this.data.selectAll;
list[id].checked = !list[id].checked;
let checks = list.every(item => item.checked);
if(checks){
selectAll=true
}else{
selectAll=false
}
this.setData({
list,
selectAll
})
this.allPrice()
},
addClick(e) { //点击加减
let coun = e.currentTarget.dataset.coun;
let id = e.currentTarget.dataset.id;
let list = this.data.list
for (let i = 0; i < list.length; i++) {
if (id === list[i].id) {
list[i].num = coun;
}
}
this.setData({
list
})
this.price()
},
//总价
allPrice() {
let list = this.data.list
let sum = 0
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
sum += list[i].num * list[i].price
}
}
this.setData({
allNum: sum,
list
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- car.wxss
.box{
height:100%;
width:100%;
}
.shopcar{
width:100%;
background: #eee;
}
.box{
height:100%;
width: 100%;
}
.shopcar{
height:280rpx;
width:100%;
display: flex;
border-bottom:1rpx solid #ccc;
}
shopcar .clickFned{
width:100rpx;
height:260rpx;
}
.center{
width:450rpx;
height:260rpx;
}
.list_item{
display: flex;
}
.center image{
height:180rpx;
width:180rpx;
background: skyblue;
margin:30rpx;
}
.prices view{
margin-top:40rpx;
}
.counts{
display: flex;
}
.counts button{
height:50rpx;
width:50rpx;
margin:80rpx 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.counts text{
display: inline-block;
margin-top:80rpx;
}
.bottom{
height:100rpx;
width:100%;
background: salmon;
position: fixed;
bottom: 0px;
display: flex;
}
- app.js 数据
App({
globalData: {
imgs: [{
img: "/img/1.jpg"
},
{
img: "/img/2.jpg"
},
{
img: "/img/3.jpg"
},
{
img: "/img/4.jpg"
},
{
img: "/img/5.jpg"
},
{
img: "/image/b1.jpg"
},
],
shopcar: [
{
img: "/image/c2.png",
title: "新鲜水梨子",
title1: "多吃水果对身体好",
price: 10,
id: 0,
num: 1,
checked:false,
},
{
img: "/image/c3.png",
title: "好吃的大红枣",
title1: "多吃大红枣对身体好",
price: 5,
id: 1,
num: 1,
checked: false,
},
{
img: "/image/c4.png",
title: "@猕猴桃",
title1: "多吃水果对身体好",
price: 22,
id: 2,
num: 1,
checked: false,
},
]
}
})
以上就是这个小demo的详细代码，希望能够对你们有帮助哦
