4 | 小程序实战之分类页面（点击菜单切换商品种类并且右侧菜单置顶 + 使用缓存技术）

最新推荐文章于 2024-05-16 23:57:38 发布
最新推荐文章于 2024-05-16 23:57:38 发布
阅读量7.6k 收藏 40
点赞数 5
分类专栏： 小程序实战1_购物商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsx_truth/article/details/108026322
版权

1. 效果

在这里插入图片描述

2. 分析接口数据

在这里插入图片描述

3. 获取分类页面的数据接口

https://api-hmugo-web.itheima.net/api/public/v1/categories

4. 调用接口

（1）为了方便演示，添加一个编译模式
在这里插入图片描述

（2）现在分类页面的index.js文件中创建三个空数组
index.js

data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: []
  },
// 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据
Cates: [],

（3）发送异步请求给三个空数组赋值
index.js

// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: []
  },
  // 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getCates();
  },
  // 获取轮播图数据
  getCates(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'})
      .then(res=>{
        this.Cates = res.data.message;
        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        // 构造右侧的大菜单数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
})

5. 页面布局

index.wxml

<view class="cates">
  <!-- 搜索框开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框结束 -->
  <view class="cates_container">
    <!-- 左侧的菜单数据开始 -->
    <scroll-view scroll-y class="left_menu">
      <!-- *this指的是for循环中item本身 -->
      <!-- 注意：要在index.js 先写死 currentIndex：0 -->
      <view
       class="menu_item {{index===currentIndex?'active':''}}"
       wx:for="{{leftMenuList}}"
       wx:key="*this"
      >
        <view>
          {{item}}
        </view>
      </view>
    </scroll-view>
    <!-- 左侧的菜单数据结束 -->
    <!-- 右侧的菜单数据开始 -->
    <scroll-view scroll-y class="right_content">
      <!-- 由于 goods_group中没有什么是唯一的属性所以-->
      <view
       class="goods_group"
       wx:for="{{rightContent}}"
       wx:key="*this"
       wx:for-index="index1"
       wx:for-item="item1"
      >
        <view class="goods_title">
          <text class="delimeter">/</text>
          <text class="title">{{item1.cat_name}}</text>
          <text class="delimeter">/</text>
        </view>
        <view class="goods_list">
          <navigator
           wx:for="{{item1.children}}"
           wx:for-item="item2"
           wx:for-index="index2"
           wx:key="cat_id"
          >
            <image mode="widthFix" src="{{item2.cat_icon}}" />
            <view class="goods_name">{{item2.cat_name}}</view>
          </navigator>
        </view>
      </view>
    </scroll-view>
    <!-- 右侧的菜单数据结束 -->
  </view>
</view>

index.less

page{
  // 先设置父页面高度
  height: 100%;
}
.cates{
  // 继承父页面高度
  height: 100%;
  .cates_container{
    // less中使用calc的时候要使用 ~ 包裹
    height: ~'calc( 100vh - 90rpx )';
    display: flex;
    .left_menu{
      // 因为现在是伸缩盒子的子项 有默认高度 100%
      flex: 2;
      .menu_item{
        display: flex;
        height: 80rpx;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
      }
      .active{
        color: var(--themeColor);
        border-left: 5rpx solid currentColor;
      }
    }
    .right_content{
      // 因为现在是伸缩盒子的子项 有默认高度 100%
      flex: 5;
      .goods_group{
        .goods_title{
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .delimeter{
            color: #ccc;
            padding: 0 10rpx;
          }
          .title{}
        }
        .goods_list{
          display: flex;
          // 允许换行
          flex-wrap: wrap;
          navigator{
            width: 33.33%;
            // 文字图片居中对齐
            text-align: center;
            image{
              width: 50%;
            }
          }
          .goods_name{
          
          }
        }
      }
    }
  }
}

app.wxss

image{
  /* 定义所有图片的宽度格式 */
  width: 100%;
}

在这里插入图片描述

6. 点击菜单可切换商品种类

修改左侧菜单的页面布局

<!-- 左侧的菜单数据开始 -->
    <scroll-view scroll-y class="left_menu">
      <!-- *this指的是for循环中item本身 -->
      <view
       class="menu_item {{index===currentIndex?'active':''}}"
       wx:for="{{leftMenuList}}"
       wx:key="*this"
       bindtap="handleItemTap"
       data-index="{{index}}"
      >
        <view>
          {{item}}
        </view>
      </view>
    </scroll-view>
    <!-- 左侧的菜单数据结束 -->

添加点击事件的行为
index.js

// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    currentIndex: 0
  },
  // 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: 'url',
    })
    this.getCates();
  },
  // 获取轮播图数据
  getCates(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'})
      .then(res=>{
        this.Cates = res.data.message;
        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        // 构造右侧的大菜单数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
  //左侧菜单点击事件
  handleItemTap(e){
    /* 
    1 获取被点击的标题身上的索引
    2 给data中的currentIndex赋值就可以了
    3 根据不同的索引来渲染右侧的商品内容
     */
    const {index} = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex:index,
      rightContent
    })
  }
})

在这里插入图片描述

7. 使用缓存技术

思路：在打开页面的时候，先做一个判断，判断本地储存中有没有旧的数据，如果没有的话，就发送请求获取这个数据，假如说有旧的数据，并且这个数据没有过期，那么此时就可以使用本地储存中旧的数据了。所以说，我们需要解决的是怎么去存数据 和 怎么去拿数据 ！

index.js

// 引入用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    currentIndex: 0
  },
  // 为了方便使用数据，在data同层级下创建Cates空数组接收接口返回的数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*
      1 先判断一下本地存储中有没有旧的数据
        {time:Date.now(),data:[...]}
      2 没有旧数据 直接发送新请求 
      3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
    */
    //  1 获取本地存储中的数据  (小程序中也是存在本地存储 技术)
    const Cates = wx.getStorageSync('cates');
    //  2 判断  
    if(!Cates){
      // 不存在 发送请求获取数据
      this.getCates();
    }else{
      // 有旧的数据 定义过期时间5分钟 1000ms = 1s
      if(Date.now()-Cates.time>1000*300){
        // 重新发送请求
        this.getCates();
      }else{
        this.Cates = Cates.data;
        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        // 构造右侧的大菜单数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  // 获取轮播图数据
  getCates(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'})
      .then(res=>{
        this.Cates = res.data.message;
        // 把接口的数据存入到本地存储中
        wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        // 构造右侧的大菜单数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
  //左侧菜单点击事件
  handleItemTap(e){
    /* 
    1 获取被点击的标题身上的索引
    2 给data中的currentIndex赋值就可以了
    3 根据不同的索引来渲染右侧的商品内容
     */
    const {index} = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex:index,
      rightContent
    })
  }
})
疑惑：web和小程序本地存储的区别

1 写代码的方式不一样了
web: localStorage.setItem(“key”,“value”) localStorage.getItem(“key”)
小程序中: wx.setStorageSync(“key”, “value”); wx.getStorageSync(“key”);

2 存的时候 有没有做类型转换
web: 不管存入的是什么类型的数据，最终都会先调用一下 toString(),把数据变成了字符串 再存入进去
小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型

8. 点击菜单-右侧列表置顶

如果你跟着我敲的话，你会发现当你点击一个菜单后，右侧列表往下拉，再点击另一个菜单，你会发现右侧列表没有置顶，那么怎么做呢？👇👇👇

思路：在右侧的菜单数据的 scroll-view 标签中增加 scroll-top 属性设置竖向滚动条位置，但这标签不能写死，如 scroll-top=“0”，因为这对于触发点击事件无效，你得设置一个变量，当点击左边菜单时，对这个变量赋值

index.wxml

<!-- 右侧的菜单数据开始 -->
    <scroll-view
     scroll-y
     class="right_content"
     scroll-top="{{scrollTop}}"
    >
    。。。
    <scroll-view/>

index.js

data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    currentIndex: 0,
    scrollTop:0
  },
。。。

// 左侧菜单的点击事件
  handleItemTap(e) {
    /* 
    1 获取被点击的标题身上的索引
    2 给data中的currentIndex赋值就可以了
    3 根据不同的索引来渲染右侧的商品内容
     */
    const { index } = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
      scrollTop: 0
    })
  }
༺鲸落༻
关注
  • 5
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序之侧栏分类-——-微信小程序实战商城系列，从草根到百万年薪程序员的十年风雨之路
m0_66265031的博客
01-19 2311
布局分析： <主盒子> <左盒子></左盒子> <右盒子></右盒子> </主盒子> 左盒子使用标准流 右盒子使用绝对定位（top、right） wxml： {{item.tree.desc}} wxss： page{ background: #f5f5f5; } /总体主盒子/ .container { position: relative; width: 100%; height: 100%; bac.
小程序商品分类页面滑动左右联动
Zan_Z的博客
02-07 2814
商品分类，滑动时可以左右联动
微信小程序中 使用swiper 滑动切换一级、二级导航
m0_55969466的博客
02-09 2186
其中遇到一个大问题使我放弃了swiper的使用，其中就是swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录。
小程序分类页面的实现
gua551100gua的博客
11-07 3598
然后跳转到分类页面的时候，分类页面通过拿到category.id，就能在分类页面知道 在金刚区选中的分类了，从而将该分类进行高亮显示。否则不显示加号，显示购物车图标。点击商品会跳转到详情页面，需要给一个跳转链接，这个商品会有不同的类别，跳转的时候，需要根据类别，做不同的逻辑处理。需要通过一个字段进行显示，而原有数据中没有这样的字段，所以需要手动给当前的数据添加这样的字段，即需要修改原数据的。选择之后，再添加到购物车。外面一个循环，里面再套一个循环，因为内外层的id是一样的，所以可以为第二层的id起个别名。
Web前端最全《微信小程序》入门小程序-商城小demo的实现，2024年最新面试你经历过最困难的事情
最新发布
2401_84434086的博客
05-16 581
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
商城小程序（3.分类页面）
Kiritoasu的博客
01-02 1669
商品分类页面的相关UI，功能
11-微信小程序商城 分类和产品 产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-16 1401
产品页面顶部切换功能 本节主要讲解产品详细页面中顶部切换界面和功能的实现，效果如图13-9所示。 1.布局分析 结构布局分析示意如图13-10所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view> <!—第1层-开始--> <view>商品</view> <!—第2层--> <view>详情</view> <!—第2层--> <view>评论
微信小程序商品列表和购物车完整代码实例
12-13
微信小程序开发，代码完整可用，用于电商微信平台开发参考，有二个界面（商品展示页和购物车页面）商品展示页选择商品加入购物车，再进入购物车页面将看到加入购物车的商品，并有商品件数和金额，和淘宝的购物车类似，有很好的参考价值。
微信小程序分类菜单激活状态跟随列表滚动自动切换
分享互联网的有趣知识~
01-17 2860
微信小程序分类菜单激活状态跟随列表滚动自动切换，这里主要用到微信小程序提供的获取页面节点信息实现，组件用的是微信小程序的逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下，同样激活左侧分类状态。
微信小程序 列表多选 下拉分页 滑动切换分类
tly_74125的博客
05-26 3821
卡片列表、分页、分类、滑动可切换分类、列表搜索、多选（实现微信聊天多选效果）、回写数据
微信小程序切换分类获取数据
weixin_48912846的博客
02-21 640
<view class="container"> <scroll-view scroll-y class="left"> <view class="item {{activeIndex===index?'active':''}}" wx:for="{{typeList}}" wx:key="index" bindtap="clickType" data-index="{{index}}" data-id="{{item.Id}}">{{item.Name
微信小程序 4个tab框切换分类
AinUser的博客
09-08 1022
https://blog.csdn.net/onion_line/article/details/80366756
WX小程序TAB栏切换 / 小程序商品分类
lh_seckill的博客
03-29 5790
微信小程序实现tab栏切换功能实现商城分类功能1.实现上图, 分类切换功能2. 思路: 通过点击tab栏, 来显示和隐藏对应的内容部分3.注意事项: 调取数据时, 需要和后台沟通清楚, 接口结构1. view层&lt;view class='container'&gt; &lt;view class='tab'&gt; &lt;view class="{{selected?'...
小程序中实现点击切换不同组件的效果
浩星
03-29 1482
前言： 小程序中实现点击切换不同页面的组件效果。 实现效果: 实现步骤： 第一：分别建立三个页面的文件夹以及他们的相关文件 第二：index模块中 index.wxml <!--index.wxml--> <view class="container"> <!--主体内容--> <view wx:if="{{active == 0}}"> <view>我是首页</view>...
微信小程序商品分类页最佳实践
hawkol的专栏
05-11 4956
微信小程序商品分类页需要实现 1.单击左边的商品类目，右侧实现联动跳转到对应商品类目标题； 2.触屏拖动右侧商品列表，右侧跳转到对应商品类目；
小程序商品多级分类的联动效果
位置服务应用
06-11 593
商城类小程序都有一个商品分类查询页面，有的是左右布局的一级分类、有的是上下+左右布局的二级分类、还有的在商品列表再增加一级分类的三级分类页面。为了分类页面的用户体验，常常需要做联动，让用户在滚动页面的时候，有畅快淋漓的丝滑体验。(子节点可视高度/宽度的一半 + 子节点前的所有兄弟节点可视高度/宽度) - scroll-view可视高度/宽度的一半。由于子节点是分装的组件，所以在ready函数中获取，并通过从relations获取到的父组件传给scroll-view。3.获取子节点的可视区域高度/宽度。
商城微信小程序（二）——完成分类页面及商品列表页
刘强西哥哥
10-06 8082
分类页面预览图： 分类页面主要代码 index.js // pages/category/index.js import { request } from "../../request/index.js" Page({ /** * 页面的初始数据 */ data: { //左侧菜单数据 leftMenuList: [], //右侧的商品数据 rightContent: [], // 被点击的左侧菜单 currentIndex: 0,
微信小程序原生开发——商品分类左右联动页面（类似于喜茶）
weixin_43976964的博客
01-28 6158
微信原生开发商品分类左右联合滚动 首先上图看一下效果： 大概的效果就是滑动右边，左边分类会跟着滚动。点击左侧分类，右侧商品也会跟着跳到对应的分类。 类似于喜茶、瑞幸小程序那种商品分类。 .wxml <view class="bottom_menu"> <!--左侧导航栏 --> <scroll-view scroll-y="true" class="scroll_left" show-s
Taro跨端开发探索13——商城小程序分类页面开发
小陈的博客
06-14 1197
昨天我们实现了引导用户在商城小程序上，从首页进入搜索页搜索然后进入商品列表页的功能。今天我们开发一下分类型筛选的功能商城小程序中分类搜索要实现的功能较为简单，我们还是先看一下京喜小程序的分类搜索页面，进行需求拆分 如上图所示，我们可以看到分类搜索注意的区域有三个，从上到下依次为这个地方的逻辑和昨天我们开发的搜索引导页面的功能差不多，也是在用户手指聚焦搜索框的时候，引导用户进入搜索页面这里我们可以看到该区域支持下拉加载，点击左侧的一级分类时，右侧会显示改一级分类下的字分类作为展示子分类的区域，点击子分类的时候
word vba添加右键菜单及4个按钮，右键菜单置顶显示，按钮调用窗体
05-25
以下是添加右键菜单及四个按钮的VBA代码： ``` Option Explicit '声明常量 Const MENU_NAME As String = "MyMenu" Const BUTTON1_NAME As String = "Button1" Const BUTTON2_NAME As String = "Button2" Const BUTTON3_NAME As String = "Button3" Const BUTTON4_NAME As String = "Button4" '添加右键菜单 Sub AddContextMenu() Dim cBar As CommandBar Dim cMenu As CommandBarPopup '删除已有的菜单和按钮 Call RemoveContextMenu '获取“编辑”菜单栏并添加一个弹出菜单 Set cBar = Application.CommandBars("Cell") Set cMenu = cBar.Controls.Add(Type:=msoControlPopup) cMenu.Caption = MENU_NAME '添加按钮到弹出菜单 Call AddButton(cMenu, BUTTON1_NAME, "按钮1", "ShowForm1") Call AddButton(cMenu, BUTTON2_NAME, "按钮2", "ShowForm2") Call AddButton(cMenu, BUTTON3_NAME, "按钮3", "ShowForm3") Call AddButton(cMenu, BUTTON4_NAME, "按钮4", "ShowForm4") '设置菜单为置顶显示 cMenu.Protection = msoBarTop End Sub '删除右键菜单和按钮 Sub RemoveContextMenu() Dim cBar As CommandBar Dim cMenu As CommandBarPopup '获取菜单栏和菜单 On Error Resume Next Set cBar = Application.CommandBars("Cell") Set cMenu = cBar.FindControl(Type:=msoControlPopup, ID:=10) On Error GoTo 0 '删除菜单和按钮 If Not cMenu Is Nothing Then Call RemoveButton(cMenu, BUTTON1_NAME) Call RemoveButton(cMenu, BUTTON2_NAME) Call RemoveButton(cMenu, BUTTON3_NAME) Call RemoveButton(cMenu, BUTTON4_NAME) cMenu.Delete End If End Sub '添加按钮到菜单 Sub AddButton(cMenu As CommandBarPopup, sButtonName As String, sCaption As String, sMacroName As String) Dim cButton As CommandBarButton '添加按钮到菜单 Set cButton = cMenu.Controls.Add(Type:=msoControlButton) cButton.Caption = sCaption cButton.Tag = sMacroName cButton.OnAction = sMacroName cButton.BeginGroup = False cButton.FaceId = 59 cButton.Style = msoButtonIconAndCaption '设置按钮名称 cButton.Name = sButtonName End Sub '删除菜单中的按钮 Sub RemoveButton(cMenu As CommandBarPopup, sButtonName As String) Dim cButton As CommandBarButton '查找并删除按钮 On Error Resume Next Set cButton = cMenu.FindControl(Type:=msoControlButton, ID:=sButtonName) On Error GoTo 0 If Not cButton Is Nothing Then cButton.Delete End If End Sub '显示窗体1 Sub ShowForm1() UserForm1.Show End Sub '显示窗体2 Sub ShowForm2() UserForm2.Show End Sub '显示窗体3 Sub ShowForm3() UserForm3.Show End Sub '显示窗体4 Sub ShowForm4() UserForm4.Show End Sub ``` 在VBA中添加以上代码后，你需要在Excel中创建四个用户窗体(UserForm)，分别命名为UserForm1、UserForm2、UserForm3和UserForm4，然后在每个用户窗体中添加需要的控件和功能。 最后，在VBA编辑器中运行AddContextMenu()子程序，即可添加右键菜单和按钮。右键单击任意单元格时，菜单将显示在顶部，并且单击每个按钮时，将显示相应的用户窗体。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值