调整/测试

src/components/sidebar-view/index.vue

@@ -13,6 +13,10 @@ const ctx = reactive({
 function switchCategory(index) {
   ctx.current = index
 }
+
+function isCurrent(index) {
+  return index === ctx.current
+}
 </script>
 
 <template>
@@ -21,8 +25,8 @@ function switchCategory(index) {
       <scroll-view class="h-full bg-gray-100">
         <view v-for="(category, index) in props.categories" :key="index"
               @click="switchCategory(index)"
-              :class="{'bg-white': index === ctx.current, 'bg-gray-100': index!== ctx.current}"
+              :class="{'bg-white': isCurrent(index), 'bg-gray-100': !isCurrent(index), 'rounded': !isCurrent(index)}"
-              class="text-center p-4 rounded">
+              class="text-center p-4">
           <text>{{ category.name }}</text>
         </view>
       </scroll-view>

src/pages/category/category.vue

@@ -57,9 +57,9 @@ function toCommodity(){
 <template>
   <SideBarView :categories="ctx.categories">
     <template #title="{current}">
-                <text>
+      <text>
-                  {{ctx.categories[current].name}}
+        {{ ctx.categories[current].name }}
-                </text>
+      </text>
     </template>
 
     <scroll-view scroll-y class="flex-grow-0 min-h-0">
@@ -67,7 +67,7 @@ function toCommodity(){
             @tap="toCommodity(i)"
             img="https://www.httpbin.org/image/png"
             title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
-      <Item v-for="i in 20" :key="i" img="https://www.httpbin.org/image/png" title="测试商品" price="9999.99"
+      <Item v-for="i in 20" :key="i" img="https://www.httpbin.org/image/jpeg" title="测试商品" price="9999.99"
             oldPrice="8888.88"/>
     </scroll-view>
   </SideBarView>

src/pages/category/components/item.vue

@@ -18,8 +18,8 @@ const props = defineProps({
 </script>
 
 <template>
-  <view class="flex overflow-hidden my-1">
+  <view class="flex overflow-hidden my-1 max-h-20">
-    <view class="w-1/4 p-2 border border-gray-200 rounded flex justify-center items-center">
+    <view class="w-1/4 max-h-20 h-20 p-2 border border-gray-200 rounded flex justify-center items-center">
       <image :src="props.img" mode="widthFix" class="w-full h-full"/>
     </view>