uni-app实现小程序的分类导航功能

效果图如下：

一、获取分类导航数据

实现思路：

1、定义数据

2、在onLoad中调用获取数据的方法

3、在methods中定义获取数据的方法

示例代码如下：

export default {
        data() {
            return {
                //分类导航的数据列表
                navList:[]
            };
        },
        onLoad() {
            //页面加载时调用方法，获取分类导航的数据

              this.getNavList();
        },
        methods: {
            async getNavList() {
                const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
                //请求失败
                if (res.meta.status !== 200) {
                    return uni.$showMsg()
                }else{
                    this.navList = res.message
                    uni.$showMsg('数据请求成功！')
                }
            }
        }
    }

二、渲染分类导航的UI结构

1、定义如下的UI结构

        <!-- 分类导航的UI结构 -->
        <view class="nav-list">
            <view class="nav-item" v-for="(item,i) in navList" :key="i">
                <image :src="item.image_src" class="nav-img"></image>
            </view>
        </view>

2、通过如下的样式美化页面的结构

    .nav-list {
        display: flex;
        justify-content: space-around;
        margin: 15px 0;
        .nav-img {
            width: 128rpx;
            height:140rpx;;
        }
    }

三、点击第一页，切换到分类页面

1、为 nav-item 绑定点击事情处理函数

        <!-- 分类导航的UI结构 -->
        <view class="nav-list">
            <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
                <image :src="item.image_src" class="nav-img"></image>
            </view>
        </view>

2、定义navClickHandler 事件处理函数：

            navClickHandler(item) {
                if(item.name === '分类') {
                    uni.switchTab({
                        url:'/pages/cate/cate'
                    })
                }
            }