(9).楼层区域 💱
- 获取楼层数据
实现思路:
- 定义data数据
- 在onLoad中调用获取数据的方法
- 在methods中定义获取数据的方法
<template> <view> <!-- 轮播图的区域 快捷键 usw --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper-item v-for="(item,index) in swiperList" :key="index"> <!-- 利用Vue的语法操作, v-bind:src='xx' :src='xx' --> <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id"> <image :src="item.image_src" mode="widthFix"></image> </navigator> </swiper-item> </swiper> <!-- 分类的导航区域 --> <view class="nav-list"> <view v-for="(item,index) in navList" :key="index" class="nav-item"> <!-- 编写点击事件 并->传递每行的item这个项 --> <image :src="item.image_src" class="nav-img" @click="navClickHandler(item)"></image> </view> </view> </view> </template> <script> export default { data() { return { // 轮播图的数据节点 swiperList: [], // 分类导航栏的数据列表 navList: [], // 楼层的数据列表 floorList: [] }; }, onLoad() { this.getSwiperList(), this.getNavList(), this.getFloorList() }, methods: { // 首页轮播图*** async getSwiperList() { // 通过花括号结构对象，以key:value的形式赋值。引用数据类型赋值穿的是对象的内存地址，该变量可以指向目标对象 {data :res} 将 响应结果的data赋值给res const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata') console.log('home页轮播图->', res) if (res.meta.status == 200) { // 假如说返回的状态码为 200 说明成功 this.swiperList = res.message } else { // 正常调用弹窗应该用的是wx 但是在uniapp看i面我们推荐使用 uni uni.$showMsg() } }, // 分类导航区 async getNavList() { const { data: res } = await uni.$http.get('/api/public/v1/home/catitems') console.log('home页分类导航区->', res) if (res.meta.status == 200) { this.navList = res.message } else { uni.$showMsg() } }, // 分类点击图片事件 navClickHandler(item) { if (item.name === '分类') { uni.switchTab({ url: '/pages/cate/cate' }) } }, async getFloorList() { const { data: res } = await uni.$http.get('/api/public/v1/home/floordata') console.log('home页楼层的数据->', res) if (res.meta.status === 200) { this.floorList = res.message } else { uni.$showMsg() } } } } </script> <style lang="scss"> // 轮播图的美化样式 swiper { height: 330rpx; // 这个意思就是在 swiper里面有一个类名叫做 swiper-item和一个image标签进行操作 .swiper-item, image { width: 100%; height: 100%; } } // 分类导航的样式 .nav-list { display: flex; // 分布在一行 justify-content: space-around; margin: 30rpx 0; .nav-img { width: 120rpx; height: 140rpx; } } </style>
- 渲染图层的标题
// 楼层标题 .floor-title { width: 100%; height: 60rpx; }
<!-- 楼层包裹性容器 --> <view class="floor-list"> <!-- 每一个口曾的item项 --> <view v-for="(item,index) in floorList" :key="index"> <image :src="item.floor_title.image_src" mode="" class="floor-title"></image> </view> </view>
- 渲染楼层中的图片
home.vue
<!-- 楼层包裹性容器 --> <view class="floor-list"> <!-- 每一个口曾的item项 --> <view v-for="(item,index) in floorList" :key="index" class="floor-item"> <image :src="item.floor_title.image_src" mode="" class="floor-title"></image> <!-- 楼层的图片区域 --> <view class="floor-img-box"> <!-- 左侧大图片的盒子 --> <view class="left-img-box"> <!-- 获取索引为0的这个大图片 动态绑定src 和 style --> <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"> </image> </view> <!-- 右侧四个小盒子 动态绑定src。但因为我们左侧的图片是索引第一张也会遍历出来，所以我们通过判断索引进行判断的操作--> <view class="right-img-box"> <view class="right-img-item" v-for=" (item2,index2) in item.product_list" :key="index2" v-show="index2!=0"> <image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}"></image> </view> </view> </view> </view> </view>
// 楼层标题 .floor-title { width: 100%; height: 60rpx; display: flex; } .right-img-box { display: flex; flex-wrap: wrap; justify-content: space-around; } .floor-img-box { display: flex; padding-left: 10rpx; }
(10).点击楼层图片跳转到商品列表页
1.在 subpkg分包中，新建 goods_list页面
2.楼层请求成功之后，通过双层forEac循环，处理URL地址
home.vue
为什么需要进行处理URL地址呢? 因为后端传递过来的数据页面是:/pages/goods_list?query=x而我们需要的是/subpkg/goods_list/goods_list?query=x所以我们要处理地址并将参数通过split()分割出来。
// 获取图层的数据 async getFloorList() { const { data: res } = await uni.$http.get('/api/public/v1/home/floordata') console.log('home页楼层的数据->', res) if (res.meta.status === 200) { // 对数据进行处理⭐⭐⭐ res.message.forEach(floor => { floor.product_list.forEach(prod => { prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1] }) }) // this.floorList = res.message } else { uni.$showMsg() } }
3.将我们的左侧大图片和右侧四个小图片的view修改成navigator
<!-- 楼层包裹性容器 --> <view class="floor-list"> <!-- 每一个口曾的item项 --> <view v-for="(item,index) in floorList" :key="index" class="floor-item"> <image :src="item.floor_title.image_src" mode="" class="floor-title"></image> <!-- 楼层的图片区域 --> <view class="floor-img-box"> <!-- 左侧大图片的盒子 --> ⭐⭐ <navigator class="left-img-box" :url="item.product_list[0].url"> <!-- 获取索引为0的这个大图片 动态绑定src 和 style --> <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"> </image> </navigator> <!-- 右侧四个小盒子 动态绑定src。但因为我们左侧的图片是索引第一张也会遍历出来，所以我们通过判断索引进行判断的操作--> <view class="right-img-box">⭐⭐⭐ <navigator class="right-img-item" v-for=" (item2,index2) in item.product_list" :key="index2" v-show="index2!=0" :url="item2.url"> <image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}"></image> </navigator> </view> </view> </view> </view>
