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-22 21:53:38 +08:00
parent 355a8f8a86
commit 3b59500d23
2 changed files with 152 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages.json
View File

@ -3,18 +3,19 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{ {
"path": "pages/category/category", "path": "pages/category/category",
"style": { "style": {
"navigationBarTitleText": "分类" "navigationBarTitleText": "分类"
} }
}, },
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{ {
"path": "pages/cart/cart", "path": "pages/cart/cart",
"style": { "style": {

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

@ -1,15 +1,156 @@
<template> <template>
<view> <view class="category">
category <!-- 搜索 -->
<view class="category_search">
<u-search placeholder="搜索" :show-action="false" ></u-search>
</view>
<!-- 内容 -->
<view class="category_content">
<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>
<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>
</view>
</view> </view>
</template> </template>
<script> <script>
let categoryData = {}
export default { export default {
} }
</script> </script>
<style> <style lang="scss">
.category {
display: flex;
flex-direction: column;
height: 100rpx;
.category_search {
padding: 10rpx;
background-color: red;
}
.category_content {
height: calc(100vh - 100rpx);
display: flex;
.menu {
width: 180rpx;
background-color: aqua;
overflow: auto;
/*
不加overflow: auto;的话
1.背景只有一屏
2.没有滚动条,滑动左边, 右边跟着一起动
*/
}
.category_list {
flex: 1;
background-color: yellow;
overflow: auto;
}
}
}
</style> </style>