scroll-view 实现滑动分类

Holyzq

已于 2022-08-09 17:50:42 修改

阅读量1k

点赞数 2

分类专栏：小程序 vue.js uniapp 文章标签： vue.js uniapp 微信小程序

于 2022-08-09 16:11:34 首次发布

本文链接：https://blog.csdn.net/huangdj321/article/details/126249941

版权

该博客介绍了如何在 uniapp 中利用 scroll-view 组件实现滑动分类功能，包括页面结构、数据获取、动态渲染左侧分类列表和右侧文章列表的详细步骤。点击分类可切换右侧文章，点击文章跳转至详情页。

摘要由CSDN通过智能技术生成

功能介绍

页面左侧显示分类数据，右侧显示每个分类对应的文章列表，点击分类名称，对应右侧文章内容切换显示。点击文章列表跳转到文章详情。最终页面效果如图：

在这里插入图片描述

接口说明

所有分类接口：http://localhost:3000/categories
每个分类对应的文章列表接口：http://localhost:3000/categories/id

组件准备

在 pages/cate/cate.vue 中

<template>
    <view id="wrapper">
        <view class="scroll-view-container">
            <!-- 左侧的滚动视图区域 -->
            <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
                <view class="left-scroll-view-item active">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view>
                <view class="left-scroll-view-item">xxx</view