uni-app slot 坑

src/components/sidebar-view/index.vue

@@ -39,7 +39,7 @@ function isCurrent(index) {
         </view>
 
         <scroll-view scroll-y class="flex-grow min-h-0">
-          <slot name="default" :current="ctx.current" :data="props.categories[ctx.current]"></slot>
+          <slot name="default" :current="ctx.current" :data="props.categories[ctx.current]" ></slot>
         </scroll-view>
       </view>
 

src/components/tab-view/index.vue

@@ -3,6 +3,7 @@ import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
 import SidebarView from "@/components/sidebar-view/index.vue"
 import Item from "@/components/tab-view/components/item";
+
 const props = defineProps({
   tabs: {
     type: Array,
@@ -58,25 +59,27 @@ onLoad(() => {
         </view>
       </view>
 
-      <swiper class="flex-grow min-h-0" :current="ctx.current" @change="swiperChange">
+      <swiper class="flex-grow min-h-0 x-scope-slot" :current="ctx.current" @change="swiperChange">
-        <swiper-item v-for="(item, index) in props.tabs" :key="index" class="h-full">
+        <swiper-item v-for="(item, index) in props.tabs" :key="index" class="h-full x-scope-slot">
-          <SidebarView :categories="ctx.categories">
+          <slot name="default" :index="index">
-            <template #default="{data}">
+            <SidebarView :categories="ctx.categories">
-              <view class="bg-orange-100 h-full"> {{ item.name }}</view>
+              <template #default="{data}" class="h-full">
-              <view> {{data.name}} </view>
+                <view class="bg-orange-100 h-full"> {{ item.name }}</view>
+                <view> {{data.name}} </view>
 
-              <scroll-view scroll-y class="flex-grow min-h-0 text-left">
+                <scroll-view scroll-y class="flex-grow min-h-0 text-left">
-                <Item v-for="i in 10" :key="i"
+                  <Item v-for="i in 10" :key="i"
-                      img="https://www.httpbin.org/image/png"
+                        img="https://www.httpbin.org/image/png"
-                      title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
+                        title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
 
-                <Item v-for="i in 20" :key="i"
+                  <Item v-for="i in 20" :key="i"
-                      img="https://www.httpbin.org/image/jpeg"
+                        img="https://www.httpbin.org/image/jpeg"
-                      title="测试商品" price="9999.99"
+                        title="测试商品" price="9999.99"
-                      oldPrice="8888.88"/>
+                        oldPrice="8888.88"/>
-              </scroll-view>
+                </scroll-view>
-            </template>
+              </template>
-          </SidebarView>
+            </SidebarView>
+          </slot>
         </swiper-item>
       </swiper>
     </view>
@@ -85,5 +88,7 @@ onLoad(() => {
 </template>
 
 <style scoped>
-
+::v-deep(.x-scope-slot) > view:not([class]) {
+  height: 100%
+}
 </style>

src/manifest.json

@@ -60,7 +60,9 @@
             "scope.userLocation": {
                 "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
             }
-        }
+        },
+        "mergeVirtualHostAttributes": true,
+        "scopedSlotsCompiler": "augmented"
     },
     "mp-alipay" : {
         "usingComponents" : true

src/pages/commodity/commodity.vue

@@ -2,18 +2,38 @@
   <view class="w-full h-full flex flex-col">
     <view>
       <view class="-z-20 absolute top-0 left-0 w-full h-full">
-        <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg" class="w-full h-32"></image>
+        <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg"
+               class="w-full h-32"></image>
       </view>
 
       <view class="pt-12 bg-black bg-opacity-10">
-        <ShopTitle />
+        <ShopTitle/>
       </view>
     </view>
 
 
     <view class="text-center flex flex-col flex-grow min-h-0">
       <TabView :tabs="ctx.tabs" class="flex-grow min-h-0">
-        <view class="" v-for="item in ctx.tabs"></view>
+        <template #default="{index}" class="h-full">
+          <SidebarView :categories="ctx.categories" v-show="index === 0" class="h-full">
+            <template #default="{data}">
+              <view> {{ data.name }}</view>
+
+              <scroll-view scroll-y class="flex-grow min-h-0 text-left">
+                <Item v-for="i in 10" :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>
+            </template>
+          </SidebarView>
+
+          <Comments v-show="index===1" />
+        </template>
       </TabView>
     </view>
   </view>
@@ -22,10 +42,13 @@
 <script setup>
 import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
-import ShopTitle from "./components/shop-title.vue";
+import ShopTitle from "./components/shop-title";
 import TabView from "@/components/tab-view/index.vue";
+import SidebarView from "@/components/sidebar-view";
+import Item from "@/components/tab-view/components/item";
+import Comments from "./components/comments/index.vue";
 
-onLoad((query)=>{
+onLoad((query) => {
   console.log(query)
 })
 
@@ -39,7 +62,20 @@ const ctx = reactive({
       name: "评价",
       value: "comments"
     }
-  ]
+  ],
+  categories: [
+    {
+      name: "外卖外送",
+      value: "takeaway"
+    },
+    {
+      name: "优选",
+      value: "optimization"
+    },
+    {
+      name: "餐饮",
+      value: "catering"
+    }]
 })
 </script>
 

src/pages/commodity/components/comments/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="flex flex-col w-full h-full">
+    评论
+  </view>
+</template>
+
+<style scoped>
+
+</style>