微信小程序开发学习笔记《20》uni-app框架-分类导航区域与楼层区域
博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档
一、分类导航区域
1.1 获取分类导航的数据
实现思路:
- 定义data数据
- 在onLoad中调用获取数据的方法
- 在methods中定义获取数据的方法
<script>
export default {
data() {
return {
// 1. 分类导航区的数据列表
navList: [],
}
},
onLoad() { // 声明生命周期函数
// 2．在小程序页面刚加载的时候，调用获取数据的方法
this.getNavList()
},
methods: {
// 获取分类导航区域数据的方法
async getNavList() {
// 3.1发起请求
const {
data: res
} = await uni.$http.get('/api/public/v1/home/catitems') //这个get封装过了，需要设置一个根路径，（这括号里面的路径都是会和根路径进行拼接的）
console.log(res)
// 3.2 请求失败
if (res.meta.status !== 200) return uni.$showMsg()
// 3.3请求成功,为data中的数据赋值
this.navList = res.message
},
},
}
</script>
1.2 渲染分类导航的UI结构
- 定义如下的uI结构：
<!--分类导航区域-->
<view class="nav-list">
<view class="nav-item" v-for="(item,i) in navList" :key="i">
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>
- 通过如下的样式美化页面结构：
.nav-list {
display: flex;
justify-content: space-around;
margin: 15px 0;
.nav-img {
width: 128rpx;
height: 140rpx;
}
}
最终效果如下：
二、分类点击跳转页面
- 添加点击事件处理函数，并传参
<view class="nav-list">
<!-- @click="navClickHandler(item)添加的点击事件处理函数 -->
<view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>
- 定义点击事件处理函数，根据不同的点击参数跳转对应的页面
// 分类导航跳转的方法
navClickHandler(item) {
// 根据item中的name是什么，进行跳转到对应页面
if (item.name === '分类') { //由于分类页面为导航栏页面，所以使用uni.switchTab
uni.switchTab({
url:'/pages/cate/cate'
})
}
},
三、楼层区域
3.1 获取楼层数据
实现思路:
- 定义data数据
- 在onLoad中调用获取数据的方法
- 在methods中定义获取数据的方法
<script>
export default {
data() {
return {
// 3.定义楼层区域的数据列表
floorList: [],
}
},
onLoad() { // 声明生命周期函数
// 在小程序页面刚加载的时候，调用获取数据的方法
this.getFloorList()
},
methods: {
// 获取楼层区域数据的方法
async getFloorList() {
// 3.1发起请求
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
console.log(res)
// 3.2 请求失败
if (res.meta.status !== 200) return uni.$showMsg()
// 3.3请求成功,为data中的数据赋值
this.floorList = res.message
},
},
}
</script>
发现了吗，获取数据的套路都是一样的，先定义数据，然后发请求。
四、渲染楼层的标题
- 定义如下的UI结构:
<!--楼层区域-->
<view class="floor-list">
<view class="floor-item" v-for="(item,i) in floorList" :key="i">
<image :src="item.floor_title.image_src" class="floor-title"></image>
</view>
</view>
- 美化楼层标题UI结构
// 楼层标题样式
.floor-title{
display: flex;
width: 100%;
height: 60rpx;
}
有没有发现循环渲染也就是套路罢了，都可以一样。
五、渲染楼层里的图片
- 定义楼层图片区域的UI结构:
<!-- 楼层的具体图片区域 -->
<view class="floor-item-box"> <!-- 楼层图片容器 -->
<!-- 楼层左大图区域 -->
<view class="left-img-box">
<image :src="item.product_list[0].image_src"
:style="{width:item.product_list[0].image_width + 'rpx'}" mode="widthFix" />
</image>
<!-- :style="{width:item.product_list[0].image_width + 'rpx'}" 动态绑定样式 mode="widthFix" 宽度自适应-->
</view>
<!-- 楼层右4小图区域 -->
<view class="right-img-box">
<view class="right-img-item" v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 != 0">
<image :src="item2.image_src"
:style="{width:item2.image_width + 'rpx'}" mode="widthFix"/>
</image>
</view>
</view>
</view>
- 美化UI结构
// 楼层区域标题样式
.floor-title {
display: flex;
width: 100%;
height: 60rpx;
}
// 楼层区域右图片样式
.right-img-box{
display: flex;
flex-wrap: wrap; // 横向对齐
}
// 楼层区域整体布局样式
.floor-item-box{
display: flex;
}
最终效果如图：
以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。
