这篇文章主要介绍“uni-app商品分类页面怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uni-app商品分类页面怎么实现”文章能帮助大家解决问题。
在data节点定义数据cateList2
data() {
return {
//当前设备可用高度
windowHeight: '',
// 分类页数据
cateList: [],
// active 索引判断
active: 0,
// 二级分类数据
cateList2: [],
};
},请求数据时在函数getCateList为其赋值（默认为第一个数据，动态数据变化在active
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
// 二级分类赋值
this.cateList2 = this.cateList[0].children
}
}在active激活项函数activeTap也对其进行动态数据绑定
methods: {
// 触击事件绑定
activeTap(options) {
// 传参方法一：
// this.active = options.target.dataset.active
// 传参方法二
this.active = options
// 动态修改二级列表
this.cateList2 = this.cateList[options].children
},效果：
结构
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
<view class="cate-level2" v-for="(item,index) in cateList2" v-bind:key="index">
<!-- 标题 -->
<view class="cate-level2-title">{{'/ ' + item.cat_name + ' /'}}</view> <!-- / {{item.cat_name}} / -->
<!-- 项目容器 -->
<view>
<view class="cate-level2-list" v-for="(prd,prdindex) in item.children" v-bind:key="prdindex">
<view class="cate-level2-prd">
<image v-bind:src="prd.cat_icon" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</scroll-view>样式
.cate-level2-title {
font-weight: 700;
padding: 2px;
font-size: 14px;
}效果：
注意：在样式image组件的属性mode尽量不要使用，样式会很难调整
结构
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
<view class="cate-level2" v-for="(item,i2) in cateList2" v-bind:key="i2">
<!-- 二级分类项目标题 -->
<view class="cate-level2-title">{{'/ ' + item.cat_name + ' /'}}</view> <!-- / {{item.cat_name}} / -->
<!-- 三级分类列表 -->
<view class="cate-level3-list">
<!-- 三级分类的item项 -->
<view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3">
<!-- 三级分类项目的图片 -->
<image v-bind:src="prd.cat_icon"></image>
<!-- 三级分类项目的文本 -->
<text>{{prd.cat_name}}</text>
</view>
</view>
</view>
</scroll-view>样式
.scroll-view-right {
background-color: #fff;
.cate-level2-title {
font-weight: 700;
padding: 2px;
font-size: 14px;
text-align: center;
}
}
.cate-level2 {
padding: 10rpx;
padding-bottom: 20rpx;
}
// 三级分类样式
.cate-level3-list {
display: flex;
// 允许自动换行
flex-wrap: wrap;
.cate-level3-list-item {
// 整体三分之一
width: 33.33%;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: space-around;
align-items: center;
image {
width: 160rpx;
height: 160rpx;
margin-bottom: 5rpx;
}
text {
font-size: 25rpx;
}
}
}效果：
在data节点定义数据scrollTop
注意：对scrollTop 赋值前后值不变情况 下会没有效果，如果默认值为0，函数动态赋值也为0，那么组件就会默认为0，视为没有变化，这里解决方法是在0，1变化（1像素默认其为顶部，一点点偏差用户看不出来的????）
data() {
return {
//当前设备可用高度
windowHeight: '',
// 分类页数据
cateList: [],
// active 索引判断
active: 0,
// 二级分类数据
cateList2: [],
// 滚动条位置
scrollTop: 1
};
},为scroll-view动态绑定scroll-top属性值
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}" v-bind:scroll-top="scrollTop">切换一级分类，动态设置scrollTop
// 触击事件绑定
activeTap(options) {
// 传参方法一：
// this.active = options.target.dataset.active
// 传参方法二
this.active = options
// 动态修改二级列表
this.cateList2 = this.cateList[options].children
// 重置滚动条位置 动态变化
this.scrollTop = this.scrollTop === 0 ? 1 : 0
},
绑定事件函数
<!-- 三级分类的item项 --> <view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3" v-on:click="gotoGoodsList(prd)">
定义函数跳转页面，并传参数 商品id
gotoGoodsList: prd => {
uni.navigateTo({
url: '/subpackages/goods_list/goods_list?cat_id=' + prd.cat_id
})效果：
git status 注释：查看当前文件状态
git add . 注释： 提交所有文件到暂存区
git commit -m "完成分类页面的开发" 注释：提交到本地仓库
git push -u origin cate 注释：提交到远程仓库的cate分支
git branch 注释：查看当前分支
git checkout master 注释：切换到主分支
git merge cate 注释：合并cate分支
git push 注释：上传主分支到远程仓库
git branch -d cate 注释：本地cate分支
关于“uni-app商品分类页面怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
