14.一天搞定主流小程序按分类列表显示文章1

小程序按分类列表显示文章1 (视频对应无13)

本教程均在第一节中项目启动下操作

  • 小程序按分类列表显示文章1 (视频对应无13)
  • 前言
  • 一、新增分类界面:![在这里插入图片描述](https://img-blog.csdnimg.cn/1dffd20abc8f47d3961dee59426f3a8f.png)
  • 二.新增接口api
    • flex布局组件
    • 数据表绑定
  • 三:效果展示
  • 四.添加宫格组件:
    • 绑定宫格数据展示
    • 2 .效果展示:
  • 五.点击上边分类,进入列表详情功能
    • 删除组件:内容
    • 新增文章列表页:
    • 删除多余接口:
    • 绑定分类事件
    • 修改并绑定文章分类接口: {{globalOption.flid}} 重点*******
    • 效果查看:
  • 六.将分类界面放入首页
    • 跨页面复制组件:
    • 效果展示:
    • 复制样式:
  • 本文章原自bilibli作者视频整理,已通过作者同意,挂载视频地址

前言

    话不多说,直接实操。

一、新增分类界面:14.一天搞定主流小程序按分类列表显示文章1_第1张图片

二.新增接口api

14.一天搞定主流小程序按分类列表显示文章1_第2张图片

flex布局组件

14.一天搞定主流小程序按分类列表显示文章1_第3张图片

数据表绑定

14.一天搞定主流小程序按分类列表显示文章1_第4张图片
14.一天搞定主流小程序按分类列表显示文章1_第5张图片

三:效果展示

14.一天搞定主流小程序按分类列表显示文章1_第6张图片

四.添加宫格组件:

14.一天搞定主流小程序按分类列表显示文章1_第7张图片

绑定宫格数据展示

14.一天搞定主流小程序按分类列表显示文章1_第8张图片

2 .效果展示:

14.一天搞定主流小程序按分类列表显示文章1_第9张图片

五.点击上边分类,进入列表详情功能

删除组件:内容

14.一天搞定主流小程序按分类列表显示文章1_第10张图片

新增文章列表页:

14.一天搞定主流小程序按分类列表显示文章1_第11张图片

删除多余接口:

14.一天搞定主流小程序按分类列表显示文章1_第12张图片

绑定分类事件

14.一天搞定主流小程序按分类列表显示文章1_第13张图片
14.一天搞定主流小程序按分类列表显示文章1_第14张图片

修改并绑定文章分类接口: {{globalOption.flid}} 重点*******

14.一天搞定主流小程序按分类列表显示文章1_第15张图片

效果查看:

14.一天搞定主流小程序按分类列表显示文章1_第16张图片

六.将分类界面放入首页

跨页面复制组件:

14.一天搞定主流小程序按分类列表显示文章1_第17张图片
14.一天搞定主流小程序按分类列表显示文章1_第18张图片

效果展示:

14.一天搞定主流小程序按分类列表显示文章1_第19张图片

复制样式:

14.一天搞定主流小程序按分类列表显示文章1_第20张图片

本文章原自bilibli作者视频整理,已通过作者同意,挂载视频地址

你可能感兴趣的:(uniapp可视化,小程序,微信小程序)