⼩程序开发--分类页⾯实现
⼩程序开发–分类页⾯实现
之前在详情页⾯利⽤Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页⾯(kind.wxml)实现商品分类。
1.引⼊第三⽅组件
⽤到的是
在kind.json中写⼊：
"usingComponents":{
"van-tab":"/miniprogram_npm/@vant/weapp/tab/index",
"van-tabs":"/miniprogram_npm/@vant/weapp/tabs/index"
}
注意路径要正确
2.使⽤组件
在kind.wxml中使⽤组件：
<van-tabs active="{{ active }}"change="onChange">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
如果报错可能是因为js⽂件中没有对应的数据变量和⽅法：
Page({
data:{
active:1,
},
onChange(event){
wx.showToast({
title:`切换到标签${event.detail.name}`,
icon:'none',
});
},
});
3.获取接⼝数据
1.获取Tab标签内容
onLoad:function(options){
// 获取顶部分类
this.loadTopCategory()
},
/**
* 获取顶部分类
*/
loadTopCategory(){
request({
url:'/pro/category',
data :{
type:'type'
}
}).then(res =>{
console.log(res.data.data)
this.setData({
titles: res.data.data
})
})
},
然后在页⾯上遍历数据：
<van-tabs active="{{ active }}"change="onChange">
<van-tab for="{{titles}}"key="index"title="{{item}}">内容 1</van-tab>
</van-tabs>
2.获取tab标签下的⼤分类内容
在⼤分类⾥⾯⽤到的是侧边导航栏来显⽰各个品牌，⾸先还是引⼊组件
"usingComponents":{
"van-sidebar":"@vant/weapp/sidebar/index",
"van-sidebar-item":"@vant/weapp/sidebar-item/index"
}
在页⾯上使⽤组件：
<van-sidebar active-key="{{ activeKey }}">
<van-sidebar-item for="{{brandlist}}"key="index"title="{{item.brand}}"/> </van-sidebar>
编写js逻辑：
brandlist:[],//tab下⾯⼤分类的内容
activeKey:0,
js导航栏下拉菜单},
/**
* tab标签点击事件
*/
onChange(event){
console.log(event)
const{index,name,title}= event.detail
// 请求⼤分类下的品牌详细数据
// wx.showToast({
//  title: `切换到标签 ${event.detail.name}`,
//  icon: 'none',
// });
},
/**
* 请求⼤分类下的品牌详细数据
*/
requestCategoryToBrand(title){
request({
url:'/pro/categorybrand',
data:{
category: title
}
}).then(res =>{
console.log(res.data.data)
this.setData({
brandlist: res.data.data
})
})
},
这⾥还有⼀个问题就是在你第⼀次进⼊⼩程序时，品牌信息不会显⽰，所以需要在请求⼤分类的时候同时选择⼀个分类的品牌数据进⾏请求作为默认显⽰。
loadTopCategory(){
request({
url:'/pro/category',
data :{
type:'type'//传递的参数
}
}).then(res =>{
console.log(res.data.data)
this.setData({
titles: res.data.data
})
//在上⾯的data中的active指明了默认显⽰的tab，因此默认的品牌信息也应该是该tab下的
// this.data.titles --- ⼤分类的数组
// this.data.active --- 当前选中的⼤分类的索引值
})
},
3.获取⼤分类下的品牌下的数据内容
⾸先在kind.json⽂件中引⼊之前详情页⾯的prolist⾃定义组件：
"prolist":"/components/prolist/prolist"
然后编写js逻辑：
kindlist: [], //⼤分类下的品牌下的数据列表内容
},
...
onTabChange(event) {
console.log(event)
const {index,name,title} = event.detail
this.setData({ //每次切换tab栏的时候就将active的值动态变化
active: index
})
...
},
.
..
/**
* 请求⼤分类下的品牌下的数据列表内容
*/
getKindList (event) {
const { brand } = event.currentTarget.dataset
console.log(brand)
request({
url: '/pro/categorybrandlist',
data: {
category: this.data.titles[this.data.active],
brand: brand,
}
}).then(res => {
console.log(res.data.data)
this.setData({
kindlist: res.data.data
})
})
},
最后在页⾯上渲染：
<van-sidebar-item for="{{brandlist}}"data-brand="{{item.brand}}"key="index"title="{{item.brand}}"bindtap="getKindList"class="van-sidebar-item"/> </van-sidebar>
<prolist prolist="{{ kindlist }}"class="prolist"/>
另外在初次进⼊页⾯时虽然有了默认显⽰的菜单选项，但是默认内容并没有显⽰：
requestKindListData(brand){
console.log(brand)
request({
url:'/pro/categorybrandlist',
data:{
category:this.data.titles[this.data.active],
brand: brand,
}
}).then(res =>{
console.log(res.data.data)
this.setData({
kindlist: res.data.data
})
})
}
该⽅法在获取⼤分类下的品牌后直接调⽤即可，并传递⼀个参数就是当前默认选中的品牌。另外，还要注意
在使⽤van-sidebar和van-sidebar-item标签的时候，默认显⽰的内容会被挤到页⾯的下⽅，解决⽅法有：1.可以在@vant下的weapp下去到对应的组件的源码⽂件并修改css属性，另外还可以使⽤来实现左侧导航右侧显⽰⾃定义内容，具体代码如下：
kind.wxml：
<!--pages/kind/kind.wxml-->
<van-tabs active="{{ active }}"change="onTabChange">
<van-tab for="{{titles}}"key="index"title="{{item}}">
<van-tree-select class="select"
items="{{ items }}"
height="55vw"
main-active-index="{{ mainActiveIndex }}"
active-id="{{ activeId }}"
click-nav="onClickNav"
height="500px"
>
<prolist prolist="{{ kindlist }}"class="prolist"slot="content"/>
</van-tree-select>
</van-tab>
</van-tabs>
kind.js：
// pages/kind/kind.js
import{ request }from'./../../utils/index.js'
Page({
/**
* 页⾯的初始数据
*/
data:{
active:0,//默认选中的tab标签
titles:[],//tab标签的内容
brandlist:[],//tab下⾯分类的内容
activeKey:0,//默认选中的品牌
kindlist:[],//⼤分类下的品牌下的数据列表内容
mainActiveIndex:0,
activeId:null,
items:[]//每个⼤类下⾯的品牌名数据
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad:function(options){
// 获取顶部分类
this.loadTopCategory()
},
/**
* 获取顶部分类
*/
loadTopCategory(){
request({
url:'/pro/category',
data :{
type:'type'//传递的参数
}
}).then(res =>{
console.log(res.data.data)
this.setData({
titles: res.data.data,
})
//在上⾯的data中的active指明了默认显⽰的tab，因此默认的品牌信息也应该是该tab下的
// this.data.titles --- ⼤分类的数组
/
/ this.data.active --- 当前选中的⼤分类的索引值
},
/**
* tab标签点击事件
*/
onTabChange(event){
console.log(event)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。