微信小程序开发--分类页面实现_微信点餐小程序中分类页面的样式怎么做

微信小程序开发–分类页面实现

之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页面(kind.wxml)实现商品分类。

1.引入第三方组件

用到的是Tab标签页

在kind.json中写入：

"usingComponents": {
  "van-tab": "/miniprogram_npm/@vant/weapp/tab/index",
  "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index"
}
1
2
3
4

注意路径要正确！！！

2.使用组件

在kind.wxml中使用组件：

<van-tabs active="{{ active }}" bind: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>
1
2
3
4
5
6

如果报错可能是因为js文件中没有对应的数据变量和方法：

Page({
  data: {
    active: 1,
  },

  onChange(event) {
    wx.showToast({
      title: `切换到标签 ${event.detail.name}`,
      icon: 'none',
    });
  },
});
1
2
3
4
5
6
7
8
9
10
11
12

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
      	})
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后在页面上遍历数据：

<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab wx:for="{{titles}}" wx:key="index" title="{{item}}">内容 1</van-tab>
</van-tabs>
1
2
3

2.获取tab标签下的大分类内容

在大分类里面用到的是侧边导航栏来显示各个品牌，首先还是引入组件

"usingComponents": {
  "van-sidebar": "@vant/weapp/sidebar/index",
  "van-sidebar-item": "@vant/weapp/sidebar-item/index"
}
1
2
3
4

在页面上使用组件：

<van-sidebar active-key="{{ activeKey }}">
	<van-sidebar-item wx:for="{{brandlist}}" wx:key="index" title="{{item.brand}}" />
</van-sidebar>
1
2
3

编写js逻辑：

data: {
    brandlist: [], //tab下面大分类的内容
    activeKey: 0,
},
/**
* tab标签点击事件
*/
onChange(event) {
    console.log(event)
    const {index,name,title} = event.detail
    // 请求大分类下的品牌详细数据
    this.requestCategoryToBrand(title)
    // 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
      })
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这里还有一个问题就是在你第一次进入小程序时，品牌信息不会显示，所以需要在请求大分类的时候同时选择一个分类的品牌数据进行请求作为默认显示。

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 --- 当前选中的大分类的索引值
      this.requestCategoryToBrand(this.data.titles[this.data.active]);
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.获取大分类下的品牌下的数据内容

首先在kind.json文件中引入之前详情页面的prolist自定义组件：

 "prolist": "/components/prolist/prolist"
1

然后编写js逻辑：

data: {
    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
      })
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最后在页面上渲染：

<van-sidebar-item wx:for="{{brandlist}}" data-brand="{{item.brand}}" wx:key="index" title="{{item.brand}}" bindtap="getKindList" class="van-sidebar-item"/>
</van-sidebar>
<prolist prolist="{{ kindlist }}" class="prolist"/>
1
2
3

另外在初次进入页面时虽然有了默认显示的菜单选项，但是默认内容并没有显示：

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
    })
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

该方法在获取大分类下的品牌后直接调用即可，并传递一个参数就是当前默认选中的品牌。另外，还要注意

在使用van-sidebar和van-sidebar-item标签的时候，默认显示的内容会被挤到页面的下方，解决方法有：1.可以在@vant下的weapp下去找到对应的组件的源码文件并修改css属性，另外还可以使用van-tree-select来实现左侧导航右侧显示自定义内容，具体代码如下：

kind.wxml：

<!--pages/kind/kind.wxml-->
<van-tabs active="{{ active }}" bind:change="onTabChange">
  <van-tab wx:for="{{titles}}" wx:key="index" title="{{item}}">
    <van-tree-select class="select"
      items="{{ items }}"
      height="55vw"
      main-active-index="{{ mainActiveIndex }}"
      active-id="{{ activeId }}"
      bind:click-nav="onClickNav"
      height="500px"
    >
    <prolist prolist="{{ kindlist }}" class="prolist" slot="content" />
    </van-tree-select>
  </van-tab>
</van-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 --- 当前选中的大分类的索引值
      this.requestCategoryToBrand(this.data.titles[this.data.active]); //刚进入时默认选择的大分类下面有哪些品牌
    })
  },
  /**
   * tab标签点击事件
   */
  onTabChange(event) {
    console.log(event)
    const {index,name,title} = event.detail
    this.setData({
      active: index
    })
    // 请求大分类下的品牌详细数据
    this.requestCategoryToBrand(title)
    // wx.showToast({
    //   title: `切换到标签 ${event.detail.name}`,
    //   icon: 'none',
    // });
  },
  /**
   * 侧边栏标签点击事件(二级菜单栏)
   */
  onClickNav(event) {
    console.log("11111")
    console.log(event)
    const {index} = event.detail //获取当前在左侧sidebar点击的索引值
    console.log(index)
    const brand = this.data.items[index].text
    console.log(brand)
    this.getKindList(brand)
  },
  /**
   * 初次进入页面请求的默认显示的商品数据
   */
  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
      })
    })
  },
  /**
   * 请求大分类下的品牌数据
   */
  requestCategoryToBrand (title) {
    request({
      url: '/pro/categorybrand',
      data: {
        category: title
      }
    }).then(res => {
      console.log(res.data.data)
      this.setData({
        brandlist: res.data.data,
      })
      this.getBrandListData(this.data.brandlist)
      this.requestKindListData(this.data.brandlist[this.data.activeKey].brand) //初次进入时请求的商品数据要确保品牌数据已经获取到才可以
    })
  },
  /**
   * 获取每个大分类下的品牌信息作为二级菜单栏
   */
  getBrandListData(brandlist) {
    this.setData({
      items:brandlist.map((target) => {
        return {
          text: target.brand
        }
      })
    })
  },
  /**
   * 请求大分类下的品牌下的数据列表内容
   */
  getKindList (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
      })
    })
  },
...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

至此为止，该小程序基本功能全部结束