• scroll-view 实现滑动分类

    功能介绍

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

    在这里插入图片描述

    接口说明

    • 所有分类接口：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">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
                <view class="left-scroll-view-item">xxxview>
            scroll-view>
            
            <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
                <view class="left-scroll-view-item">yyyview>
            scroll-view>
        view>
        
        <my-footer>my-footer>
    view>
template>

    • 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
    <script>
	export default {
		data() {
			return {
				// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
				wh: 0
			}
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
		},
		methods: {

		}
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    

    • 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

    页面效果如下

    请添加图片描述

    获取分类数据

    1、在 data 中定义分类数据节点

    data() {
    return {
        // 分类数据列表
        categories: []
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、调用获取分类列表数据的方法

    onLoad() {
  // 调用获取分类列表数据的方法
  this.getCategoriesList()
}

    • 1
    • 2
    • 3
    • 4

    3、定义获取分类列表数据的方法

    methods: {
    // 发起请求
    async getCategoriesList() {
        const { data: res } = await uni.$http.get('/categories')
        this.categories = res.data.categories
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    动态渲染左侧的分类列表

    1、循环出所有分类

    
<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
  <block v-for="(item, index) in categories" :key="index">
    <view class="left-scroll-view-item">{{item.name}}view>
  block>
scroll-view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、在 data 中定义默认选中项的索引

    data() {
  return {
    // 当前选中项的索引，默认让第一项被选中
    active: 0
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、循环渲染结构时，为选中项动态添加 .active 类名

    <block v-for="(item, index) in categories" :key="index">
  <view :class="['left-scroll-view-item', i === active ? 'active' : '']">{{item.name}}view>
block>

    • 1
    • 2
    • 3

    4、为分类的 Item 项绑定点击事件处理函数 changeActive

    <block v-for="(item, index) in categories" :key="index">
    <view :class="['left-scroll-view-item', index === active ? 'active' : '']"  @click="changeActive(index)">{{item.name}}view>
block>

    • 1
    • 2
    • 3

    5、定义 changeActive 事件处理函数，动态修改选中项的索引

    methods: {
    // 选中项改变的事件处理函数
    changeActive(index) {
        this.active = index
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    动态渲染右侧的文章列表

    1、在 data 中定义文章列表的数据节点和当前分类的 id

    data() {
  return {
    // 文章列表
    articlesList: [],
    // 当前分类的id   
    currentId: 1,  
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2、点击分类的 item 项时，传入当前分类的 id

    <block v-for="(item, index) in categories" :key="index">
    <view :class="['left-scroll-view-item', index === active ? 'active' : '']"
        @click="changeActive(index, item.id)">{{item.name}}view>
block>

    • 1
    • 2
    • 3
    • 4

    3、修改 changeActive 方法，在点击切换分类之后，为分类id数据赋值

    methods: {
    changeActive(i, id) {
        this.active = i
        this.currentId = id
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4、定义获取每个分类对应的文章列表数据的方法

    methods: {
    // 每个栏目对应的所有文章
    async initArticle() {
        const {
            data: res
        } = await uni.$http.get(`/categories/${this.currentId}`)
        this.articlesList = res.data.articles
    },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    5、在 onLoad 和 changeActive 中分别调用 initArticle 方法

    onLoad() {
    this.initArticle()
},


methods: {
    changeActive(i, id) {
        this.active = i
        this.currentId = id
        this.initArticle()
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    6、完善 html 渲染

    
<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
    <view class="list-item" v-for="(article, index) in articlesList" :key="index">
        <navigator class="cate-url" :url="'../article/article?id=' + article.id">
            <view class="list-title">{{article.title | ellipsis(30)}}view>
            <view class="list-desc">
                <view>{{article.views}} 阅读 · {{article.commentCount}} 评论view>
                <view>{{article.createdAt | date_format}}view>
            view>
        navigator>
    view>
scroll-view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    7、美化样式

    .right-scroll-view {
    .list-item {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgb(238, 238, 238);
        background-color: #fff;
        width: 100%;

        .list-title {
            padding: 15px 10px;
            font-size: 16px;
            font-weight: bold;
            color: #222226;
        }

        .list-desc {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 10px 10px;
            font-size: 15px;
            color: #999aaa;
        }
    }

    .list-item:first-child {
        border-top: none;
    }
}

scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

    • 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
  • 相关阅读:
    SwiftUI ☞ @State 相关问题
    深入解析spring boot配置加载原理，配置文件的加载顺序是怎么实现的？
    数字孪生赋能实景三维中国建设分论坛成功举办
    【算法1-4】[NOIP2003普及组第三题]递归与递推——栈
    VR赋能红色教育，让爱国主义精神永放光彩
    P3385 【模板】负环
    Java基于SpringBoot+Vue的考研资讯平台
    达索Abaqus 2022新功能介绍（一
    【花雕体验】12 搭建ESP32C3之Arduino开发环境
    boot引导升级，成功引导运行loader
  • 原文地址：https://blog.csdn.net/huangdj321/article/details/126249941