进行加载框的布局
//初始化请求数量
var ajaxMum = 0;
//封装一个方法用于请求数据
//export：公开该方法
export var request =(params) =>{
//函数调用一次，请求数量加一
ajaxMum++;
console.log("params==>",params,ajaxMum)
//发送请求之前，显示加载框
wx.showLoading({
title: '加载中。。。',
mask:true
})
//默认路径
var baseUrl ="https://api-hmugo-web.itheima.net/api/public/v1";
return new Promise((resolve,reject)=>{
wx.request({
url: baseUrl+params.url,
success:(res)=>{
//console.log("成功回调==》",res)
//resolve("promise成功调用返回的值")
resolve(res.data.message)
},
fail:(err) =>{
//console.log("失败回调==》",err)
//reject("promise调用失败返回的值")
reject(err)
},
complete:() =>{
//该函数无论调用成功或者失败都会执行、
//请求完成时，请求数量要减一
ajaxMum--;
if(ajaxMum == 0){
//可以确保当前页面的所有请求都完毕了
//关闭加载框
wx.hideLoading();
}
}
})
})
}
在此，首页设计告一段落，现在到设计分类页面了。
// pages/sort/sotr.js
//导入请求函数
import { request }from "../../request/index"
Page({
/**
* 页面的初始数据
*/
data: {
leftMenuData:[], //存放左边菜单数据
rightContent:[], //存放右边商品数据
allSortData:[] //存放所有数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数
this.getSortData();
},
//获取商品分类数据
getSortData(){
request({url:"/categories"})
.then(res => {
console.log(res)
//map():返回一个新数组，该新数组中的元素是函数中return的值
var leftMenu = res.map( v =>{
console.log("v ==> ",v)
return v.cat_name;
})
console.log(leftMenu)
//数据响应
this.setData({
leftMenuData:leftMenu,
rightContent:res[0].children
})
console.log(this.data.leftMenuData,this.data.rightContent)
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
至此，左边菜单完成。
经过编程右边也可以完成
// pages/sort/sort.js
//导入数据
import { request } from "../../request/index";
Page({
/**
* 页面的初始数据
*/
data: {
leftMenuData:[],//存放左边菜单数据
rightMenuData:[],//存放右边商品数据
allSortData:[],//存放所有分类数据
currentIndex:0,//默认菜单激活的下标值
scrollTop:0//右边菜单滚动条的位置
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数
this.getSortData();
},
//获取商品分类数据
getSortData(){
request({url:"/categories"})
.then(res=>{
/*console.log(res)
var leftMenu = res.map(v=>{
console.log("v数组当前项元素 ==>",v)
return v.cat_name;
})*/
var leftMenu=[];
res.forEach(v=>{
//v:数组当前项
leftMenu.push(v.cat_name)
})
//console.log(leftMenu)
//数据响应
this.setData({
leftMenuData:leftMenu,
rightContent:res[0].children,
allSortData:res
})
//console.log(this.data.leftMenuData,this.data.rightContent)
console.log(res)
})
},
//左边菜单点击事件
leftMenuTap(e){
//e:事件对象event
console.log(e)
//获取当前点击的菜单对应的下标
var index=e.currentTarget.dataset.index;
//数据响应
this.setData({
currentIndex: index,
rightContent:this.data.allSortData[index].children,
scrollTop:0 //重新设置右边菜单的滚动条设置
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--pages/sort/sort.wxml-->
<view class="sort">
<!--搜索-->
<Search></Search>
<!--内容-->
<view class="sortContent">
<!--左边菜单-->
<scroll-view scroll-y class="leftMenu">
<view wx:for="{{leftMenuData}}" wx:key="index" class="{{index == currentIndex ? 'active' : ''}}" bindtap="leftMenuTap" data-index="{{index}}">{{item}}</view>
</scroll-view>
<!--右边商品-->
<scroll-view scroll-y class="rightContent" scroll-top="{{scrollTop}}">
<view class="goodsGroup" wx:for="{{rightContent}}" wx:key="index">
<!--标题-->
<view class="goodsTitle">
<text class="line">/</text>
<text class="title">{{item.cat_name}}</text>
<text class="line">/</text>
</view>
<!--列表-->
<view class="goodsList">
<navigator wx:for="{{item.children}}" wx:for-item="goods" wx:for-index="id" wx:key="id">
<view class="goodsImg">
<image mode="widthFix" src="{{goods.cat_icon}}"></image>
</view>
<view class="goodsName">{{goods.cat_name}}</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
/* pages/sort/sort.wxss */
.sortContent{
/*css的计算函数，可以进行加减乘除运算，注意书写时运算符左右两侧一定要空格隔开*/
height: calc(100vh - 100rpx);
display: flex;
}
/*左边菜单样式*/
.leftMenu{
height: 100%;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
width:200rpx;
}
/*激活菜单样式*/
.leftMenu .active{
color:#e4393c;
}
/*右边内容样式*/
.rightContent{
width: calc(100% - 200rpx);
height: 100%;
}
.goodsTitle{
text-align: center;
padding:20rpx 0;
font-size: 32rpx;
}
.goodsTitle .line{
color: #ccc;
padding:0 10rpx;
}
.goodsList{
display: flex;
flex-wrap: wrap;
text-align: center;
padding-bottom: 20rpx;
}
.goodsList navigator{
width: 33.33%;
}
.goodsList navigator .goodsImg{
height:130rpx;
display: flex;
justify-content: center;
align-items: center;
}
.goodsList navigator .goodsImg image{
width:60%;
}
.goodsList .goodsName{
font-size: 18rpx;
}
最终成果：
今天的学习就到此了。
扫一扫
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
