分类页模板

一、搜索框部分

先制作一个假的搜索框，之后再做一个专门搜索的页面，点击搜索框跳到搜索页面

页面布局

<template><view class="classify"><!-- 搜索框 --><view class="search"><view class="search-content"><!-- 在uni-app官网找的图标 --><uni-icons type="search" size="26" color="#9F9F9F"></uni-icons><text>搜索家居服装</text></view></view></view>
</template>

页面样式

*{margin: 0;padding: 0;
}
.classify{background-color: #fff;
}
.search{width: 100%;height: 100rpx;display: flex;align-items: center;.search-content{width: 90%;height: 70rpx;margin:auto;border: 1px solid #E6E6E6;border-radius: 100rpx;display: flex;justify-content: center;align-items: center;color: #9F9F9F;text{margin-left: 10rpx;}}
}

效果图：

二、分类部分

和首页的商品列表部分很相似，商品列表部分是上下，分类是左右

看设计图不需要滚动，所以和商品列表写法相同，只是不同的样式和后台数据

需要滚动的基本结构：
<scroll-view scroll-y class="cate-left"></scroll-view>
<scroll-view scroll-y class="cate-right"></scroll-view>

左侧部分

页面布局

<!-- 分类部分 --><view class="cate-container"><view class="cate-left"><view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view></view><view class="cate-right"><view class="cate-content"><!-- <image src="../../static/c1.png" mode=""></image><view class="cate-text">牛仔裤</view> --></view></view></view>

页面样式

.cate-container{width: 100%;height: 1000rpx;display: flex;.cate-left{width: 200rpx;background-color: #F6F6F6;.cate-item{width: 100%;height: 100rpx;line-height: 100rpx;padding-left: 40rpx;box-sizing: border-box;}.active{background-color: #FFFFFF;position: relative;padding-left: 40rpx;box-sizing: border-box;&::before{content: '';display:block;width: 10rpx;border-radius: 6rpx;height: 40rpx;background-color: #FC4353;position: absolute;left: 0rpx;top: 30rpx;}}}.cate-right{flex: 1;background-color: #007AFF;}}

后台数据

连接后台

<script>export default {data() {return {// 初始化的分类列表cateList:[],// 当前点击项的索引号activeIndex:0};},methods:{async getcateList(){const res=await uni.$http.get('/classify')console.log(res)const {data:{classify,code}}=resif(code!=200){return uni.showToast({title:'加载数据失败',duration:1000,icon:'none'})}else{this.cateList=classify}},//更改点击项的索引号changeActive(i){this.activeIndex=i}},onLoad() {this.getcateList()}}
</script>

效果图：

右侧部分

页面布局

<!-- 分类部分 --><view class="cate-container">。。。<view class="cate-right"><view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex"><image :src="goodItem.picUrl" mode=""></image><view class="cate-text">{{goodItem.text}}</view></view></view></view>

页面样式

.cate-container{width: 100%;display: flex;。。。.cate-right{flex: 1;display: flex;flex-wrap: wrap;height: 300rpx;.cate-content{width: 33%;height: 200rpx;text-align: center;image{width: 100rpx;height: 100rpx;}.cate-text{}}}}

后台数据

连接后台

<script>export default {data() {return {// 初始化的分类列表cateList:[],// 当前点击项的索引号activeIndex:0,// 分类下的商品信息goodList:[]};},methods:{async getcateList(){const res=await uni.$http.get('/classify')console.log(res)const {data:{classify,code}}=resif(code!=200){return uni.showToast({title:'加载数据失败',duration:1000,icon:'none'})}else{this.cateList=classify// 获取第一个分类下的商品this.goodList=classify[0].children}},//更改点击项的索引号changeActive(i){this.activeIndex=i// 已经获取到索引号this.goodList=this.cateList[i].children}},onLoad() {this.getcateList()}}
</script>

整体代码

<template><view class="classify"><!-- 搜索框 --><view class="search"><view class="search-content" @click="goToSearch"><!-- 在uni-app官网找的图标 --><uni-icons type="search" size="26" color="#9F9F9F"></uni-icons><text>搜索家居服装</text></view></view><!-- 分类部分 --><view class="cate-container"><view class="cate-left"><view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view></view><view class="cate-right"><view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex"><image :src="goodItem.picUrl" mode=""></image><view class="cate-text">{{goodItem.text}}</view></view></view></view></view>
</template><script>export default {data() {return {// 初始化的分类列表cateList:[],// 当前点击项的索引号activeIndex:0,// 分类下的商品信息goodList:[]};},methods:{async getcateList(){const res=await uni.$http.get('/classify')console.log(res)const {data:{classify,code}}=resif(code!=200){return uni.showToast({title:'加载数据失败',duration:1000,icon:'none'})}else{this.cateList=classify// 获取第一个分类下的商品this.goodList=classify[0].children}},//更改点击项的索引号changeActive(i){this.activeIndex=i// 已经获取到索引号this.goodList=this.cateList[i].children},//点击搜索框跳转到搜索页面goToSearch:function(){uni.navigateTo({url:'/subpkg/goods-search/goods-search'})}},onLoad() {this.getcateList()}}
</script><style lang="scss">
*{margin: 0;padding: 0;
}
.classify{background-color: #fff;.search{width: 100%;height: 134rpx;display: flex;align-items: center;.search-content{width: 90%;height: 80rpx;margin:auto;border: 1px solid #E6E6E6;border-radius: 100rpx;display: flex;justify-content: center;align-items: center;color: #9F9F9F;text{margin-left: 10rpx;}}}.cate-container{width: 100%;display: flex;.cate-left{width: 200rpx;background-color: #F6F6F6;.cate-item{width: 100%;height: 100rpx;line-height: 100rpx;padding-left: 40rpx;box-sizing: border-box;}.active{background-color: #FFFFFF;position: relative;padding-left: 40rpx;box-sizing: border-box;&::before{content: '';display:block;width: 10rpx;border-radius: 6rpx;height: 40rpx;background-color: #FC4353;position: absolute;left: 0rpx;top: 30rpx;}}}.cate-right{flex: 1;display: flex;flex-wrap: wrap;height: 300rpx;.cate-content{width: 33%;height: 200rpx;text-align: center;image{width: 100rpx;height: 100rpx;}.cate-text{font-size: 34rpx;}}}}
}</style>

最终效果图：

uni-app项目（分类页）相关推荐

Android 开源项目分类汇总 APP功能汇总
Android 开源项目第一篇--个性化控件(View)篇包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Progr ...
VUE 项目落地页使用 LinkedME 深度链接服务跳回App
VUE 项目落地页使用 LinkedME 深度链接服务跳回App 当前需求: 在微信或者浏览器中打开页面, 需要跳转回对应app: 当前实现技术: 使用 LinkedME 深度链接服务实现流程: 1 ...
微信小程序商城项目实战(第二篇:分类页)
实现分类页修改json文件并且引入搜索框 {"usingComponents": {"search-input":"../../components ...
Android开源项目分类汇总-转载
太长了,还是转载吧... 今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源项目分类汇总,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有 ...
Android开源项目分类汇总[转]
Android开源项目分类汇总如果你也对开源实现库的实现原理感兴趣,欢迎 Star 和 Fork Android优秀开源项目实现原理解析欢迎加入 QQ 交流群:383537512(入群理由需要填写 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
2016年GitHub上史上最全的Android开源项目分类汇总
以下内容为转载版主原网址 http://itindex.net/detail/51896-github-android-开源 GitHub上史上最全的Android开源项目分类汇总今天在看博客的时 ...
基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
Android 开源项目分类汇总（下）
Android 开源项目分类汇总(下) 九.ScrollView Discrollview 支持滚动时 Item 淡入淡出,平移,缩放效果的 ScrollView 项目地址:https://githu ...

uni-app项目（分类页）

分类页模板

一、搜索框部分

页面布局

页面样式

效果图：

二、分类部分

左侧部分

页面布局

页面样式

后台数据

连接后台

效果图：

右侧部分

页面布局

页面样式

后台数据

连接后台

整体代码

最终效果图：

uni-app项目（分类页）相关推荐

最新文章

热门文章