hxx/uni-app-shopping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分类页渲染和样式调整

Browse Source
This commit is contained in:
jqtmviyu@gmail.com 2021-02-25 09:44:26 +08:00
parent 3b59500d23
commit ce53c58f68
2 changed files with 95 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -28,7 +28,7 @@
}
image{
/* 宽度等于父盒子的宽度, 才不会主动撑开 */
Width:100%;
width:100%;
/* 移除图片标签默认的3px 间隙 */
vertical-align: middle;
}

200
src/pages/category/category.vue
View File

@ -1,114 +1,29 @@
<template>
<view class="category">
<!-- 搜索 -->
<!-- 1. 搜索 -->
<view class="category_search">
<u-search placeholder="搜索" :show-action="false" ></u-search>
</view>
<!-- 内容 -->
<!-- 2. 内容 -->
<view class="category_content">
<!-- 2.1 左列表: 大家电,热门推荐,海外购... -->
<view class="menu">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
<view>13</view>
<view>14</view>
<view>15</view>
<view>16</view>
<view>17</view>
<view>18</view>
<view>19</view>
<view>20</view>
<view>21</view>
<view>22</view>
<view>23</view>
<view>24</view>
<view>25</view>
<view>26</view>
<view>27</view>
<view>28</view>
<view>29</view>
<view>30</view>
<view>31</view>
<view>32</view>
<view>33</view>
<view>34</view>
<view>35</view>
<view>36</view>
<view>37</view>
<view>38</view>
<view>39</view>
<view>40</view>
<view>41</view>
<view>42</view>
<view>43</view>
<view>44</view>
<view>45</view>
<view>46</view>
<view>47</view>
<view>48</view>
<view>49</view>
<view>50</view>
<view class="menu_list" v-for="item in menu" :key="item">{{item}}</view>
</view>
<!-- 2.2 右列表: 电视,空调... -->
<view class="category_list">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
<view>13</view>
<view>14</view>
<view>15</view>
<view>16</view>
<view>17</view>
<view>18</view>
<view>19</view>
<view>20</view>
<view>21</view>
<view>22</view>
<view>23</view>
<view>24</view>
<view>25</view>
<view>26</view>
<view>27</view>
<view>28</view>
<view>29</view>
<view>30</view>
<view>31</view>
<view>32</view>
<view>33</view>
<view>34</view>
<view>35</view>
<view>36</view>
<view>37</view>
<view>38</view>
<view>39</view>
<view>40</view>
<view>41</view>
<view>42</view>
<view>43</view>
<view>44</view>
<view>45</view>
<view>46</view>
<view>47</view>
<view>48</view>
<view>49</view>
<view>50</view>
<view class="category_group" v-for="item in goods" :key="item.cat_name">
<!-- 2.2.1 标题 -->
<view class="category_group_title">{{item.cat_name}}</view>
<!-- 2.2.2 详情列表 -->
<view class="category_group_list">
<view class="category_item" v-for="item2 in item.children" :key="item2.cat_name">
<image :src="item2.cat_icon" mode="widthFix"></image>
<view class="goods_name">{{item2.cat_name}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
@ -117,7 +32,31 @@
<script>
let categoryData = {}
export default {
data(){
return{
// 左列表
menu:[],
// 当前左列表选中项
menuCurrent: 0,
// 右列表
goods: []
}
},
onLoad(){
this.getCategories()
},
methods: {
// 获取详情信息
async getCategories(){
const { message } = await this.$u.api.getCategories()
categoryData = message
console.log(message);
this.menu = message.map(v=>(v.cat_name))
console.log(this.menu)
this.goods = message[this.menuCurrent].children
console.log(this.goods);
},
}
}
</script>
@ -136,20 +75,69 @@ export default {
height: calc(100vh - 100rpx);
display: flex;
.menu {
width: 180rpx;
background-color: aqua;
width: 200rpx;
/* background-color: aqua; */
overflow: auto;
/*
不加overflow: auto;的话
1.背景只有一屏
2.没有滚动条,滑动左边, 右边跟着一起动
*/
.menu_list {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
}
.active {
color: #eb4450;
/* currentColor = 当前的字体颜色 css自带 */
border-left: 5rpx solid currentColor;
}
}
/* 右列表 */
.category_list {
flex: 1;
background-color: yellow;
overflow: auto;
.category_group {
/* 标题 */
.category_group_title {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
&::before {
content: "/";
margin-right: 10rpx;
}
&::after {
content: "/";
margin-left: 10rpx;
}
}
/* 图片列表 */
.category_group_list{
display: flex;
flex-wrap: wrap;
/* 一个商品 */
.category_item {
width: 33.33%;
text-align: center;
image {
width: 70%;
}
.goods_name{
}
}
}
}
}
}
}