【小程序项目开发 -- 京东商城】uni-app 商品分类页面（上）

news2024/11/17 11:42:13

在这里插入图片描述

🤵‍♂️ 个人主页: @计算机魔术师
👨‍💻 作者简介：CSDN内容合伙人，全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴 速速点击链接登录注册把！🎉🎉

该文章收录专栏
✨ 2022微信小程序京东商城实战 ✨

文章目录

  • 一、新建cate分支（选读*）
  • 二、添加编译模式
  • 三、渲染页面基本结构
  • 三、API获取手机型号等数据
  • 四、美化item项
  • 五、获取分类页面数据
    • 5.1 接口数据样式
  • 六、动态渲染一级分类页面结构

文章目录

  • 一、新建cate分支（选读*）
  • 二、添加编译模式
  • 三、渲染页面基本结构
  • 三、API获取手机型号等数据
  • 四、美化item项
  • 五、获取分类页面数据
    • 5.1 接口数据样式
  • 六、动态渲染一级分类页面结构

一、新建cate分支（选读*）

之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条
也可以跳过本节内容，不影响阅读观感🌹

在根目录下，右键打开bash
基于 master 分支在本地创建 cate 子分支，用来开发和 cate 相关的功能：

  • 创建新分支cate且跳转到该分支
git checkout -b cate

查看分支（前面有*代表着当前分支）

git branch

在这里插入图片描述

二、添加编译模式

由于我们要开发的是cate 页面，所以我们将小程序编译模式修改启动页面 在cate，这样就不用每次都需要点击跳转了
在这里插入图片描述

三、渲染页面基本结构

  • 生成基本的滑动页面结构
<template>
  <view>
    <!-- 包裹容器 -->
    <view class="scroll-view-container">
      <!-- 左侧container -->
      <scroll-view class="scroll-view-left" scroll-y="true" style="height: 300px;">
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
      <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" style="height: 300px;">
        <view></view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


<style lang="scss">
  .scroll-view-container {
    display: flex;
  }

  .scroll-view-left {
    width: 200rpx;
  }

  .scroll-view-right {}
</style>

效果：
在这里插入图片描述

三、API获取手机型号等数据

  • 我们需要将整个scroll-view 的高度和手机屏幕高度一样，我们可以调用APIuni.getSystemSync(),得到该手机设备的信息（如手机型号，可用高度）
    在这里插入图片描述
    注意：是可使用的窗口高度，而不是屏幕高度（不包括navigationbar和tarbar）
    在这里插入图片描述

在onLoad()生命周期函数调用API ，并在data节点定义数据，将可用窗口高度对其赋值给windowHeight

<script>
  export default {
    data() {
      return {
        //当前设备可用高度
        windowHeight: ''
      };
    },
    onLoad() {
      const {
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
    }
  }

标签样式动态绑定

:style="{height: windowHeight + 'px'}"

效果：
在这里插入图片描述

四、美化item项

  • 方法一（不建议）：

为每一个item项加上类选择器
鼠标选择标签，CTRL + D选择全部（新版本是CTRL + E)，如
在这里插入图片描述
在这里插入图片描述
在对该类选择器 修改样式

  • 方法二（建议）
    使用后代选择器，在.scroll-view-right view{} 修改样式

添加激活项样式&.active(用于配置选中时的样式）

样式

 .scroll-view-left view {
  text-align: center;
  line-height: 120rpx;
  background-color: lemonchiffon;
  font-size: 12px;
  // 激活项样式 后代选择器覆盖类选择器
  // &选择器覆盖 所在选择器
  &.active {
    background-color: lawngreen;
    // 相对定位 不改变文档布局移动
    position: relative;
    // 设置第一个元素
    &::before {
      // 内容为 一个空格
      content: ' ';
      //  块级元素
      display: block;
      background-color: #a00000;
      height: 60rpx;
      width: 6rpx;
      // 绝对定位 移出正常文档流
      position: absolute;
      // 最左侧
      top: 25%;
      left: 0;
    }
  }
 }
  .scroll-view-right view{
    text-align: center;
    line-height: 80rpx;
    background-color: aquamarine;
  }

激活项

<view class="active">xxx</view>

效果：
在这里插入图片描述

五、获取分类页面数据

  • data定义数据
<script>
  export default {
    data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: []
      };
    },
    ```
  • onLoad生命周期函数调用 函数获取数据
...
onLoad() {
      // 调取手机高度数据
      const {
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
      // 调取分类数据
      this.getCateList()
    },
    ...
  • method定义 获取函数
  ...
 methods: {
      // 获取分类数据
      async getCateList() { // async 异步不能使用箭头函数
        const {data:res} = await uni.$http.get('/api/public/v1/categories')
        // 判断是否赋值成功
        if (res.meta.status != 200) return uni.$showMsg()
        // 赋值
        this.cateList = res.message
      }
    }
  }
</script>

获取成功
在这里插入图片描述

5.1 接口数据样式

{
    "message": [
        {
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "cat_icon": "",
            "children": [
                {
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "cat_icon": "",
                    "children": [
                    {
                        "cat_id": 5,
                        "cat_name": "曲面电视",
                        "cat_pid": 3,
                        "cat_level": 2,
                        "cat_deleted": false,
                        "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                    }]
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

六、动态渲染一级分类页面结构

激活项active实现思路：

在data节点定义数据active,对分类动态循环生成的索引与之比较，相同则在对应索引加上类active,并对分类点击帮绑定事件处理函数并对其传索引参数，动态修改active,如下

  • 方法一：
    组件传参
<template>
  <view>
    <!-- 包裹容器 -->
    <view class="scroll-view-container">
      <!-- 左侧container -->
      <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
        <!-- 判断是否选中-active -->
        <block v-for="(item,index) in cateList" v-bind:key="index">
          <!-- 传参方法一 -->
          <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap" :data-active=index>{{item.cat_name}}</view>
        </block>
        
      </scroll-view>
      <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


//函数

// 触击事件绑定
 activeTap(options){
   this.active = options.target.dataset.active
 },
  • 方法二：
    注意：绑定函数直接传参，这在原生小程序是不允许的，原生小程序中会把整体当成函数
  <template>
    <view>
      <!-- 包裹容器 -->
      <view class="scroll-view-container">
        <!-- 左侧container -->
        <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
          <!-- 判断是否选中-active -->
          <block v-for="(item,index) in cateList" v-bind:key="index">
            <!-- 传参方法二 函数直接传参 这在原生小程序是不可以的 -->
            <!-- <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap(index)" >{{item.cat_name}}</view> -->
          </block>
          
        </scroll-view>
        <!-- 右侧container -->
        <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
          <view>xxx</view>
        </scroll-view>
      </view>
    </view>
  </template>


// 函数
// 触击事件绑定
  activeTap(options){
    // this.active = options.target.dataset.active
    this.active = options
  },

效果：
在这里插入图片描述

  ✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/410058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端 --- HTML

前端 --- HTML

文章目录1. HTML 结构1.1 HTML 文件基本结构1.2 VsCode 中 使用 HTML 的快捷键2. HTML 常见标签2.1 注释标签2.2 标题标签2.3 段落标签2.4 换行标签2.5 格式化标签2.6 图片标签2.7 超链接标签2.8 表格标签2.9 列表标签2.10 表单标签form 标签input 标签① 文本框② 密码框③ 单…
阅读更多...
Vue中实现路由跳转的三种方式详细分解

Vue中实现路由跳转的三种方式详细分解

vue中实现路由跳转的三种方式 目录 vue中实现路由跳转的三种方式 一、使用vue-router 1.下载vue-router模块到当前工程 2.在main.js中引入VueRouter函数 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4.创建路由规则数组 – 路径和组件名对应关系 5…
阅读更多...
CSS flex布局最后一行左对齐的常用方法

CSS flex布局最后一行左对齐的常用方法

一、justify-content 在CSS flex布局中&#xff0c;justify-content属性定义了浏览器之间&#xff0c;如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间&#xff0c;可以控制列表的水平对齐方式&#xff0c; justify-content: center; /* 居中排列 */ …
阅读更多...
Visual Studio 2022 给创建的类/接口加头注释

Visual Studio 2022 给创建的类/接口加头注释

Visual Studio 2022 给类加注释 找到文件路径 一般在C盘&#xff1a; C:\Program Files\Microsoft Visual Studio\2022\Professional\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 如图&#xff1a; 修改这个.cs文件 using System; using System.Collections.Generic…
阅读更多...
Linux驱动开发——串口设备驱动

Linux驱动开发——串口设备驱动

Linux驱动开发——串口设备驱动 一、串口简介 串口全称叫做串行接口&#xff0c;通常也叫做 COM 接口&#xff0c;串行接口指的是数据一个一个的顺序传输&#xff0c;通信线路简单。使用两条线即可实现双向通信&#xff0c;一条用于发送&#xff0c;一条用于接收。串口通信距…
阅读更多...
C++ Linux Web Server 面试基础篇-计网(一)

C++ Linux Web Server 面试基础篇-计网(一)

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…
阅读更多...
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）

纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）

文章目录前言一、HTML(index.html)1. 加入元素二、CSS(style.css)2. 重置浏览器样式3.设置字体样式4.将我们的元素居中5.设置背景颜色6.设置动画显示的位置7.设置夜晚时的背景色8.将动画显示的区域设置为圆型9.绘制白天时天空的样子10.绘制夜晚时天空的样子11.创建昼夜交替动画…
阅读更多...
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程&#xff08;基于create-vue&#xff0c;vite&#xff0c;Vite Vue&#xff09; 目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite Vue 项目 五、打开Vue 项目管理器 六、Vite Vue 项目目…
阅读更多...
Vue.js笔记------事件

Vue.js笔记------事件

一、事件与事件流 1、事件与事件流 【事件】 JavaScript中的事件&#xff0c;可以理解就是在HTML文档或者浏览器中发生的一种交互操作&#xff0c;使得网页具备互动性。常见的有加载事件、鼠标事件。 【事件流】 由于DOM是一个树结构&#xff0c;如果在父子节点绑定事件时候&am…
阅读更多...
前端使用xlsx导出数据生成Excel文件

前端使用xlsx导出数据生成Excel文件

xlsx的使用安装 xlsx引入 xlsx需要导出的数据源将数据源转成需要的二维数组定义 Excel 表头将定义好的表头添加到 body 中1 创建虚拟的 workbook2 将二维数组转成 sheet!merges 设置单元格合并!cols 设置列宽!rows 设置行高3 向 workbook 中添加 sheet4 导出 workbook 完整示例…
阅读更多...
JavaWeb 简单的图书管理系统(jsp+servlet)

JavaWeb 简单的图书管理系统(jsp+servlet)

关于与需要的文件下载字体颜色分类:黑色 表示正文蓝色 表示一个超链接&#xff0c;点击可以跳转页面橙色 表示一级标题或项目的包名绿色 表示子级内容中含有代码或解释的标题紫色 表示一个代码块的标题红色 表示()外的文件是()内文件的子类,实现类或依赖浅灰 表示解释或其类型高…
阅读更多...
Vue封装Axios实现全局的loading自动显示效果

Vue封装Axios实现全局的loading自动显示效果

在 vue 项目中&#xff0c;我们通常会使用 Axios 库来与后台进行数据交互。而当我们发起 ajax 请求时&#xff0c;常常需要在页面上显示一个加载框&#xff08;Loading 效果&#xff09;&#xff0c;然后等数据返回后自动将其隐藏。要实现这个功能&#xff0c;我们可以在每次请…
阅读更多...
尚品汇前台项目总结

尚品汇前台项目总结

这是我的第一篇个人博客&#xff0c;主要是对我学习前端过程中的一些主记录。由于我在江苏&#xff0c;从2022年过完年&#xff0c;一直到年中&#xff0c;疫情反反复复&#xff0c;又正是大三&#xff0c;马上面临就业难题&#xff0c;我选择了前端。 从html,css,js基础,webAP…
阅读更多...
15个awk的经典实战案例

15个awk的经典实战案例

目录 一、插入几个新字段 二、格式化个空白 三、筛选IPV4地址 命令及结果 第一种查询方式 第二种查询方式 第三种查询方式 四、读取.ini配置文件中的某段 命令及结果 第一种查询方式 第二种查询方式 五、根据某字段去重 命令及结果 第一种方式 第二种方式 六、…
阅读更多...
你是这样的 CSS，19个唯美的边框

你是这样的 CSS，19个唯美的边框

作者&#xff1a;niemvuilaptrin 译者&#xff1a;前端小智 来源&#xff1a;medium 有梦想&#xff0c;有干货&#xff0c;微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整…
阅读更多...
Vue之插槽

Vue之插槽

1. 插槽是什么 插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”&#xff0c;父组件可以使…
阅读更多...
STM32入门教程课程简介（B站江科大自化协学习记录）

STM32入门教程课程简介（B站江科大自化协学习记录）

课程简介 STM32最小系统板面包板硬件平台 硬件设备 STM32面包板入门套件 Windows电脑 万用表、示波器、镊子、剪刀等 软件介绍 Keil MDK 5.24.1 是一款嵌入式软件开发工具&#xff0c;它提供了一个完整的开发环境&#xff0c;包括编译器、调试器和仿真器。它支持各种微控制…
阅读更多...
微信小程序富文本解析器rich-text、web-view、wxParse、mp-html、towxml对比

微信小程序富文本解析器rich-text、web-view、wxParse、mp-html、towxml对比

微信小程序解析富文本html大概有几种方式&#xff0c;我用过的有这三种rich-text、web-view、wxParse、mp-html&#xff0c;各有各的优缺点&#xff0c;接下来聊一聊。 一、rich-text 二、web-view 三、wxParse 四、mp-html 五、towxml 一、rich-text rich-text富文本组件…
阅读更多...
XSS漏洞攻防

XSS漏洞攻防

目录XSS攻击简介XSS攻击的危害XSS攻击分类XSS产生原因实战靶场搭建构造xss攻击脚本弹窗警告页面嵌套页面重定向弹窗警告并重定向图片标签利用绕开过滤的脚本存储型xss基本演示访问恶意代码&#xff08;网站种马&#xff09;XSS获取键盘记录XSS盲打htmlspecialchars()函数自动xs…
阅读更多...
SpringBoot - ZooKeeper

SpringBoot - ZooKeeper

SpringBoot - ZooKeeper1、Curator框架的集成2、构建zookeeper客户端3、Master选举3.1、LeaderSelector3.2、LeaderLatch4、成员组注册5、节点监听1、Curator框架的集成 <dependency><groupId>org.apache.curator</groupId><artifactId>curator-recip…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023