布局分析

  • 水平方向
    • 页面左侧定宽 右侧 自然撑开
  • 垂直方向
    • 头尾 定高 中间自然撑开
      • height:calc(100vh - XXrpx)内容减去顶部导航的高度
  • 左侧滚动
    • overflow: auto显示滚动条
  • 右侧滚动 ```vue 

  1. <a name="b7W3d"></a>
  2. ### 数据分析及处理
  3. > 数据是一次性返回全部的条例，将数组拆分成两部分
  4. > 左侧的标题数据 右侧的商品数组
  6. 根据当前项的下标动态添加选中类<br />样式使用伪元素
  7. ```vue
  8. <template>
  9.   <view>
  10.     <Search></Search>
  11.     <view class="content">
  12.       <view class="menu">
  13.         <view :class="['menu-item',  current === index? 'active' : '']" v-for="(item,index) in menus" :key="item">
  14.            {{item}}
  15.         </view>
  16.       </view>
  17.       <view class="goods">
  18.       </view>
  19.     </view>
  20.   </view>
  21. </template>
  23. <script>
  24. export default {
  25.   data() {
  26.     return {
  27.       // 当前选中项的下标
  28.       current: 0,
  29.       // 菜单数据
  30.       menus:[],
  31.     }
  32.   },
  33.   methods: {
  34.     async getCategories() {
  35.       const res = await this.$u.get('/categories');
  36.       console.log(res);
  37.       this.menus = res.message.map(item => item.cat_name)
  38.     },
  39.     handleActive(index) {
  40.       this.current = index
  41.     }
  42.   },
  43.   onLoad() {
  44.     this.getCategories()
  45.   }
  46. }
  47. </script>
  49. <style lang="scss">
  50. .content{
  51.   height: calc(100vh - 64rpx);
  52.   display: flex;
  53.   .menu{
  54.     width: 182rpx;
  55.     overflow: auto;
  56.     .menu-item{
  57.       font-size: 28rpx;
  58.       height: 72rpx;
  59.       display: flex;
  60.       justify-content: center;
  61.       align-items: center;
  62.     }
  63.     .active{
  64.       position: relative;
  65.       color: #EA4350;
  66.       &::before{
  67.         content: "";
  68.         position: absolute;
  69.         width: 3px;
  70.         height: 80%;
  71.         top: 50%;
  72.         transform: translateY(-50%);
  73.         left: 0;
  74.         background-color: #eb4450;
  75.       }
  76.     }
  77.   }
  78.   .goods{
  79.     flex: 1;
  80.     overflow: auto;
  81.   }
  82. }
  83. </style>

将商品数据取出来，根据数据结构两层循环渲染

  • uniapp中规定
    • 如果在 data中定义过变量
      • 全局变量 可以在任意地方 this.xx 方式来使用
      • 这个变量编译到小程序的时候，会被存放在小程序data - 在标签中直接使用
    • 如果没有在data中定义 变量 而是在 其他地方直接 写 this.xxx
      • this.xxx 也是全局变量
      • 不会把这个数据 编译到小程序data中， 在标签中 无法使用它！！

        如果只在uniapp中使用 页面级别的全局变量 直接this.xxx 即可使用 不需要在data中定义 在data中定义的变量一定要在标签中直接使用 在data中定义的数据都要在标签中体现出来 否则 就是不好的代码 影响性能小程序体验会特卡！！！

  1. <template>
  2.   <view>
  3.     <view class="content">
  4.       <view class="goods">
  5.         <view 
  6.         class="goods-item" 
  7.         v-for="item in goods" 
  8.         :key="item.cat_id">
  9.           <!-- 标题 -->
  10.           <view class="goods-title">
  11.             {{ item.cat_name }}
  12.           </view>
  13.           <!-- 商品 -->
  14.           <view class="goods-modle">
  15.             <navigator url="" 
  16.             v-for="good in item.children" 
  17.             :key="good.cat_id">
  18.               <!-- 图片 -->
  19.               <u-image 
  20.               mode="widthFix" 
  21.               width="100%" 
  22.               :src="good.cat_icon">
  23.               </u-image>
  24.               <!-- 文字 -->
  25.               <text>{{ good.cat_name }}</text>
  26.             </navigator>
  27.           </view>
  28.         </view>
  29.       </view>
  30.     </view>
  31.   </view>
  32. </template>
  34. <script>
  35. export default {
  36.   data () {
  37.     return {
  38.       // 当前选中项的下标
  39.       current: 0,
  40.       // 商品数据
  41.       goods: []
  42.     }
  43.   },
  44.   methods: {
  45.     async getCategories () {
  46.       const res = await this.$u.get('/categories')
  47.       console.log(res)
  48.       /**
  49.        * 如果变量没由使用在页面中 可以不在data中定义 直接使用
  50.        * 这样性能会更好一点
  51.        */
  52.       this.categories = res.message
  53.       // 下标0 这里为默认
  54.       this.goods = this.categories[0].children
  55.     },
  56.     handleActive (index) {
  57.       this.current = index
  58.       // 根据下标切换不同的商品内容
  59.       this.goods = this.categories[this.current].children
  60.     }
  61.   },
  62.   onLoad () {
  63.     this.getCategories()
  64.   }
  65. }
  66. </script>
  68. <style lang="scss">
  69.   .goods {
  70.     flex: 1;
  71.     overflow: auto;
  72.     .goods-item {
  73.       .goods-title {
  74.         font-size: 26rpx;
  75.         height: 72rpx;
  76.         display: flex;
  77.         justify-content: center;
  78.         align-items: center;
  79.         &::before {
  80.           content: '/';
  81.           color: #ccc;
  82.           margin-right: 20rpx;
  83.         }
  84.         &::after {
  85.           content: '/';
  86.           color: #ccc;
  87.           margin-left: 20rpx;
  88.         }
  89.       }
  90.       .goods-modle {
  91.         display: flex;
  92.         flex-wrap: wrap;
  93.         navigator {
  94.           width: 33.33%;
  95.           padding: 15rpx;
  96.           text-align: center;
  97.         }
  98.       }
  99.     }
  100.   }
  101. }
  102. </style>