小程序优购商城项目讲解
首页页面:
pages/home/home.wxml
首页代码:
search:点击跳转到搜索页面,然后判断。根据输入框中的value和给的接口中的数据(数组)进行对比,如果相同进行渲染
// 发送请求获取搜索建议 数据
async qsearch(query){
const res=await request({url:"/goods/qsearch",data:{query}});
console.log(res);
this.setData({
goods:res
})
},
轮播图:使用组件进行作相对应的渲染(调取数据)
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duration="{{true}}">
<block wx:for="{{list}}" wx:key="index">
<swiper-item>
<image src="{{item.image_src}}"></image>
</swiper-item>
</block>
</swiper>
下面的分类栏中给设置跳转 跳转到分类页面 (点击事件,跳转 ,组件)
接下啦就是接口中的三个分类图,循环渲染
tabber: 点击跳转到对应的页面 并且有高亮效果
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/tabbar/home.png",
"selectedIconPath": "/tabbar/home_active.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "/tabbar/category.png",
"selectedIconPath": "/tabbar/category_active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/tabbar/cart.png",
"selectedIconPath": "/tabbar/cart_active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/tabbar/my.png",
"selectedIconPath": "/tabbar/my_active.png"
}
]
},
pages/home/home.js
data: {
list: [],
dh:[],
lc:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 轮播
app.http.banner().then((res) => {
// console.log(res.data.message);
this.setData({
list: res.data.message
})
})
// nav
app.http.nav().then((res) => {
let { message} = res.data
// console.log(message);
this.setData({
dh:message
})
})
// 楼层
app.http.lc().then((res)=>{
let {message} =res.data
this.setData({
lc:message
})
// console.log(this.data.lc)
})
},
css样式有点杂乱 大局就是使用的 响应式 flex 布局 来写的 就不放了 有要的可以私,抱拳了
分类页面
点击左边的商品分类名,显示右侧对应的数据,选中的商品分类名称高亮
左侧边栏商品分类:
渲染分类接口中的商品分类名称 存放到数组中进行循环渲染到分类左侧,设置点击事件
bindtap="addlist"
点击他的时候显示对应的商品分类
<!-- 左盒子 -->
<view class="left_box">
<block wx:for="{{left_sj}}" wx:key="index">
<view class="{{index == indexs ? 'aaa' :'z_wz'}}" bindtap="addlist" data-index="{{index}}">{{item}}</view>
</block>
</view>
右侧边栏商品logo展示:
右侧的数据和渲染和左侧比较相似,要渲染需要商品图片,商品名等,哦,还有flex布局哦!
<!-- 右盒子 -->
<view class="right_box">
<!-- 分类名 -->
<block wx:for="{{goods}}" wx:key="index" wx:for-index="index1" wx:for-item="item1">
<view class="s_ys">/ {{item1.cat_name}} /</view>
<!-- 文字和图片盒子 -->
<block wx:for="{{item1.children}}" wx:key="index" wx:for-index="index2" wx:for-item="item2">
<navigator url="/pages/goods_list/goods_list?cid={{item2.cat_id}}" class="y_ys" >
<image src="{{item2.cat_icon}}" class="tp"></image>
{{item2.cat_name}}
</navigator>
</block>
</block>
</view>
js代码:
/ pages/category/category.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
// 接口返回数据
fl:[],
// 左边数据
left_sj:[],
// 右边数据
right_sj:[],
indexs:0,
goods:[]
},
addlist(e){
// console.log(e)
let index = e.currentTarget.dataset.index
// console.log(index)
let good = this.data.fl[index].children
// console.log(good)
this.setData({
indexs:index,
goods:good
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 分类
app.http.fl().then((res)=>{
let {message}=res.data
this.setData({
fl:message
})
// 构造左边的数据
let left_sj = this.data.fl.map(v=>v.cat_name)
// console.log(left_sj)
// 构造右边的商品数据
let right_sj = this.data.fl[0].children
this.setData({
left_sj,
right_sj
})
// console.log(this.data.fl)
})
},
css代码:
.bigbox {
height: 100%;
}
.box {
box-sizing: border-box;
width: 100%;
height: calc(100vh - 80rpx);
display: flex;
}
.left_box {
height: 100%;
flex: 2;
overflow: auto;
}
.z_wz{
height: 60rpx;
border-bottom: 1px solid rgb(221, 221, 221);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.right_box {
height: 100%;
flex: 5;
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.s_ys{
width: 100%;
text-align: center;
height: 50rpx;
margin: 40rpx 0;
}
.tp{
width: 120rpx;
height: 120rpx;
}
.y_ys{
font-size: 26rpx;
width: 30%;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin-left: 15rpx;
}
.aaa{
width: 100%;
height: 60rpx;
border-bottom: 1px solid rgb(221, 221, 221);
border-left:4rpx solid red;
color: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
点击分类页面右侧的商品跳转到相对应的商品列表页面(传参),下拉刷新重新加载一下页面的数据,有下拉过度动画,上拉加载更多分页,每次上拉加载5条数据,最后提示已到底部。
js:
<view class="tabs">
<view class="tabs_title">
<view wx:for="{{tabs}}" wx:key="id" class=" {{index==indexs ?'active':'title_item'}}" bindtap="handleItemTap"
data-index="{{index}}">
{{item.value}}
</view>
</view>
<view class="tabs_content">
<block wx:for="{{lbss}}" wx:key="index">
<navigator url="/pages/goods_detail/goods_detail?id={{item.goods_id}}" class="h_box">
<view class="t">
<image src="{{item.goods_small_logo}}"></image>
</view>
<view class="z">
<view class="z_yc"> {{item.goods_name}}</view>
<view style="color: #f22">¥{{item.goods_price}}</view>
</view>
</navigator>
</block>
</view>
</view>
css:
.tabs {
width: 100%;
}
.tabs_title {
height: 100%;
display: flex;
}
.title_item {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
padding: 15rpx 0;
}
.active {
color: #f22;
border-bottom: 5rpx solid #f22;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
padding: 15rpx 0;
}
.tabs_content {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.h_box {
width: 100%;
height: 400rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.t {
flex: 2;
}
image {
width: 260rpx;
height: 260rpx;
}
.z {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 30rpx;
flex: 3;
}
.z_yc {
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 2;
/*最多显示5行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
/*强制英文单词自动换行*/
}
点击对应的商品进入详情(传参id),接收并在页面中渲染相对应的功能,点击收藏触发点击事件,将本条数据存到本地缓存中,然后在相对应的页面提取本地缓存中的数据进行渲染相对应的数据,收藏后收藏icon改变状态图案。点击下边
wxml:
<!--pages/goods_detail/goods_detail.wxml-->
<view class="bigbox">
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duration="{{true}}" class="lb_1">
<block wx:for="{{xq.pics}}" wx:key="index">
<swiper-item class="lb_1">
<image src="{{item.pics_sma_url}}" class="lb_1"></image>
</swiper-item>
</block>
</swiper>
<view class="jq">
¥{{xq.goods_price}}
</view>
<view class="xqwz">
<view class="l-z1">
{{xq.goods_name}}
</view>
<view class="r-z1">
<mp-icon icon="star" color="black" size="{{25}}"></mp-icon>
收藏
</view>
</view>
<!-- 图文 -->
<view class="tw_wz">
图文详情
</view>
<!-- 渲染图文 -->
<rich-text nodes="{{xq.goods_introduce}}"></rich-text>
<view class="db">
<view class="db_l">
<view class="l_z2">
<mp-icon icon="comment" color="black" size="{{25}}"></mp-icon>
联系客服
</view>
<view class="l_z2">
<mp-icon icon="share" color="black" size="{{25}}"></mp-icon>
分享
</view>
<navigator url="/pages/cart/cart " class="l_z2" bindtap="toCart">
<mp-icon icon="shop" color="black" size="{{25}}"></mp-icon>
购物车
</navigator>
</view>
<view class="db_r">
<navigator url="/pages/cart/cart" class="bt1" bindtap="addBdhc">
加入购物车
</navigator>
<navigator class="bt2">
立即购买
</navigator>
</view>
</view>
</view>
js
// pages/goods_detail/goods_detail.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
xq:{},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options)
// 详情
app.http.xq(options.id).then((res)=>{
let {message}=res.data
this.setData({
xq:message,
})
console.log(this.data.xq)
})
},
// 跳转购物车
toCart(){
wx.reLaunch({
url: '/pages/cart/cart',
});
},
// 点击事件 加到本地缓存中
addBdhc(){
let conts = wx.getStorageSync('goodlist')||[]
// console.log(conts)
let obj = this.data.xq
// console.log(obj)
let index = conts.findIndex(item =>{
return item.goods_id === obj.goods_id
})
if(index === -1){
this.data.xq.num = 1;
this.data.xq.change = true
conts.push(this.data.xq)
// console.log(this.data.xq)
}else{
conts[index].num++
}
wx.setStorageSync('goodlist',conts)
console.log(index)
wx.showToast({
title: '添加购物车成功',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})