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

news/2024/7/20 1:27:44 标签: 小程序

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

之前在详情页面利用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"
}

注意路径要正确！！！

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>

如果报错可能是因为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 }}" bind:change="onChange">
  <van-tab wx:for="{{titles}}" wx: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 wx:for="{{brandlist}}" wx:key="index" title="{{item.brand}}" />
</van-sidebar>

编写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
      })
    })
  },

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

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]);
    })
},

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

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

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

然后编写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
      })
    })
},

最后在页面上渲染：

<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"/>

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

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属性，另外还可以使用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>

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
      })
    })
  },
...
})

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


http://www.niftyadmin.cn/n/909617.html

相关文章

HDU 1711 Number Sequence

HDU 1711 Number Sequence

在nnext数组保存前面的字符的前缀与后缀的最大匹配&#xff0c;即nnext[i]保存的是当i匹配不成功时应带回朔到的位置 #include <iostream> #include <cstdio> #include <cstring>using namespace std;#define maxn 1000050int s1[maxn]; int s2[maxn]; int n…
阅读更多...
Android得到一个闹钟在第三方

Android得到一个闹钟在第三方

收集报警信息 闹铃时间,闹铃备注信息 闹铃引起系统变化的点&#xff1a; 1. Send Notification (正点闹钟能够设置不发送) 2. Play audio 闹铃信息结构体 ClockInfo{ String apkName; String startTime; String backup; } SendNotification SystemUI BaseStatusBar.java 在Base…
阅读更多...
微信支付之内置浏览器的H5页面支付

微信支付之内置浏览器的H5页面支付

微信支付之内置浏览器的H5页面支付 因为项目需要&#xff0c;要在H5页面中加入微信支付&#xff0c;所以便去尝试&#xff0c;只想说真的很坑&#xff0c;尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号&#xff0c;申请开通支付&#xff0c…
阅读更多...
uni-app个人中心页开发

uni-app个人中心页开发

uni-app个人中心页开发 1.拍照&#xff0c;选择图片 user.vue&#xff1a; <template><view><view class"takephoto" click"takephoto">拍照</view><image v-for"(item,index) of imglist" :src"item" …
阅读更多...
多态的理解

多态的理解

面向对象三原则&#xff1a;继承、封装、多态。 必要条件&#xff1a;继承、重写、父类引用指向子类对象。 重载是类中多态性的表现&#xff0c;重写是父类和子类间多态性的表现。 如果在子类中定义某方法与其父类有相同的名称和参数&#xff0c;我们说该方法被重写 。 子类的对…
阅读更多...
uni-app购物车页面开发

uni-app购物车页面开发

uni-app购物车页面开发 1.加入购物车功能 detail.vue&#xff1a; <template><view><view><image :src"proimg" mode""></image><view>产品名称: {{proname}} </view><view>价格: {{price}} RMB</v…
阅读更多...
Swift - 使用arc4random()、arc4random_uniform()取得随机数

Swift - 使用arc4random()、arc4random_uniform()取得随机数

arc4random()这个全局函数会生成9位数的随机整数1&#xff0c;下面是使用arc4random函数求一个1~100的随机数&#xff08;包括1和100&#xff09; 1var temp:Int Int(arc4random()%100)12&#xff0c;下面是使用arc4random_uniform函数求一个1~100的随机数&#xff08;包括1和…
阅读更多...
uni-app首页开发以及组件

uni-app首页开发以及组件

uni-app首页开发以及组件 uni-app中的基本组件和微信小程序中的差不多。更适合在手机端的开发。 1.自定义组件prolist 在pages的同级目录下新建一个文件夹components&#xff0c;然后在里面新建一个prolist的文件夹&#xff0c;里面新建prolist.vue&#xff0c;在prolist.vu…
阅读更多...
最新文章

Copyright @ 2022~2023