uni-app slot 坑
This commit is contained in:
parent
5cb9283901
commit
f4d7e20fdb
GPG Key ID:
BD85FF18B373C341
@ -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>
|
||||
|
||||
|
||||
@ -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-item v-for="(item, index) in props.tabs" :key="index" class="h-full">
|
||||
<SidebarView :categories="ctx.categories">
|
||||
<template #default="{data}">
|
||||
<view class="bg-orange-100 h-full"> {{ item.name }}</view>
|
||||
<view> {{data.name}} </view>
|
||||
<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 x-scope-slot">
|
||||
<slot name="default" :index="index">
|
||||
<SidebarView :categories="ctx.categories">
|
||||
<template #default="{data}" class="h-full">
|
||||
<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">
|
||||
<Item v-for="i in 10" :key="i"
|
||||
img="https://www.httpbin.org/image/png"
|
||||
title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
|
||||
<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>
|
||||
<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>
|
||||
</slot>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
@ -85,5 +88,7 @@ onLoad(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
::v-deep(.x-scope-slot) > view:not([class]) {
|
||||
height: 100%
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -60,7 +60,9 @@
|
||||
"scope.userLocation": {
|
||||
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
|
||||
}
|
||||
}
|
||||
},
|
||||
"mergeVirtualHostAttributes": true,
|
||||
"scopedSlotsCompiler": "augmented"
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
13
src/pages/commodity/components/comments/index.vue
Normal file
13
src/pages/commodity/components/comments/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="flex flex-col w-full h-full">
|
||||
评论
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user