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

简介: 【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)

 文章目录

一、新建cate分支(选读*)

之所以为了创建分支,也是养成良好的项目开发习惯,这样在开放项目井井有条

也可以跳过本节内容,不影响阅读观感🌹

在根目录下,右键打开bash

基于 master 分支在本地创建 cate 子分支,用来开发和 cate 相关的功能:

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

查看分支(前面有*代表着当前分支)

git branch

图片.png

二、添加编译模式

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

图片.png

三、渲染页面基本结构

  • 生成基本的滑动页面结构
<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>

效果:

14.gif

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

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

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

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

标签样式动态绑定

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

效果:

15.gif

四、美化item项

  • 方法一(不建议):

为每一个item项加上类选择器

鼠标选择标签,CTRL + D选择全部(新版本是CTRL + E),如

图片.png

图片.png

在对该类选择器 修改样式

  • 方法二(建议)
    使用后代选择器,在.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>

效果:

16.gif

五、获取分类页面数据

  • 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>

获取成功

图片.png

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
  },

效果:

17.gif

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



相关文章
|
23天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
341 7
|
22天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
419 1
|
3月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
26天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
137 1
|
27天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
431 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
22天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
239 0
|
26天前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
21 0
|
26天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
360 0
|
28天前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
28天前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。

热门文章

最新文章