2021-07-09商场主页及分类

<view class="cates">
<sercherinput></sercherinput><view class="cates_container"><!--左侧菜单 --><scroll-view scroll-y class="left_menu" ><view class="menu_item {{index===currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this"bindtap="handleItemTap"data-index="{{index}}">{{item}}</view></scroll-view>
<!--右侧菜单 --><scroll-view scroll-y class="right_menu" ><view class ="goods_group" wx:for="{{rightContent}}"wx:for-index="index1"wx:for-item="item1"><view class="goods_title"><text class="delimiter">/</text><text class="title">{{item1.cat_name}}</text><text class="delimiter">/</text></view><view class="goods_list"><navigator wx:for="{{item1.children}}"wx:for-index="index2"wx:for-item="item2"wx:key="cat_id"><image mode="widthFix" src="{{item2.cat_icon}}"  > </image><view class="goods_name">{{item2.cat_name}}</view></navigator></view></view></scroll-view>
</view></view>

/* pages/category/index.wxss */
page{height: 100%;}
.cates{height: 100%;.cates_container{height: ~'calc(100vh-90rpx)';display: flex;.left_menu{flex: 2;.menu_item{height: 80rpx;display: flex;justify-content: center;align-items: center;font-size: 30rpx;}.active{color: var(--themeColor);border-left: 5rpx solid currentColor;}}.right_menu{flex: 5;.goods_group{.goods_title{height: 80rpx;display: flex;justify-content: center;align-items: center;.delimiter{color: #fff;padding: 0 10rpx;}.title{}}.goods_list{display: flex;flex-wrap: wrap;navigator{width: 33.33%;text-align: center;image{width: 50%;}.goods_name{}}}}}}
}

// pages/category/index.js
import{request}from "../../request/index.js";
Page({/*** 页面的初始数据*/data: {//左边主菜单leftMenuList:[],//右侧商品子菜单rightContent:[],//被点击的左侧菜单currentIndex: 0},//接口的返回数据Cates:[],/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*缓存：本地据数据没有过期，就有本地数据，否则发送新数据*/const Cates = wx.getStorageSync("cates");if (!Cates) {//本地数据不存在发送数据this.getCates();}else{//有旧的本地数据if (Date.now()-Cates.time>1000*10) {//重新发送数据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})})},//左侧菜单点击事件 index索引代替数组下标，即可实现点击切换右边菜单handleItemTap(e){const {index}=e.currentTarget.dataset;let rightContent=this.Cates[index].children;this.setData({currentIndex:index,rightContent})}})

2021-07-09商场主页及分类相关推荐

项目实训2021.07.09
编写测试用例: 由于未和函数组完成交接,没能进行集成测试,所以只简单设计了测试用例,包括字符串输入.文件输入.小文本输入.大文本输入,并根据后续测试情况继续添加用例. 用例编号项目名称用例名称测 ...
战略思维浅谈笔记 | 2021.07.09
目录一.战略是什么? 我们所说的很多战略,其实算不上真正的战略. 二.战略迷失 1.第一大误区:战略迷失在微观要素中 2.第二大误区:战略传说在伟大神话中三.京东战略:欲望和逻辑四.乔布斯:重新 ...
哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
2021.07.22禾赛提前批一面面经
2021.07.22禾赛提前批一面面经 1.LUTRAM的意思 2.LUTRAM和block RAM的区别 3.时序约束和时序优化 4.跨时钟域 5.为什么不能多bit采用同步寄存器打两拍(就这个问题 ...
【Google Play】APK 扩展包 ( 2021年09月最新处理方案 | 文件准备 | 拷贝文件至内置存储 | 解压及使用扩展文件 )
文章目录前言一.文件准备二.拷贝文件至内置存储三.解压及使用扩展文件四.博客资源前言在上一篇博客 [Google Play]APK 扩展包 ( 2021年09月02日最新处理方案 | 内 ...
2021.07.07 宇信科技
2021.07.07 宇信科技宇信科技晚上电话面问了一堆java基础,离谱,jd上也没要求java:简历筛选扣工资! java小白,凭借c语言基础简单回答了一哈,面试官估计在电 ...
2021.08.09【普及组】模拟赛C组比赛总结
文章目录 2021.08.09[普及组]模拟赛C组比赛总结写在前面: T1 :[普及模拟]生产武器题目大意: 正解: T2 :[普及模拟]城市连接题目大意: 正解: T3 :[普及模拟]抢救文件 ...
Doris Weekly FAQ】2021.07.19~2021.08.01
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月19日 - 2021年08月01日的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
【Doris Weekly FAQ】2021.07.05~2021.07.18
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月15日 - 2021年07月18日的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
Ubuntu下载安装EDB1.3.0 2021.07
Ubuntu16.04x64下载安装EDB1.3.0 2021.07 1.更新gcc和g++ > 7 $ sudo add-apt-repository ppa:ubuntu-toolchain ...

2021-07-09商场主页及分类

2021-07-09商场主页及分类相关推荐

最新文章

热门文章