Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装剥离

Browse Source
This commit is contained in:
shikong 2024-10-18 15:26:27 +08:00
parent 7de906b8b3
commit 26e3469b40
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
6 changed files with 95 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/sidebar-view/index.vue Normal file
View File

@ -0,0 +1,48 @@
<script setup>
import {reactive} from "vue";
const props = defineProps({
categories: {
type: Array,
default: () => []
}
})
const ctx = reactive({
current: 0,
})
function switchCategory(index) {
ctx.current = index
}
</script>
<template>
<view class="flex w-full h-full">
<view class="w-1/4 h-full bg-gray-100">
<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="text-center p-4 rounded">
<text>{{ category.name }}</text>
</view>
</scroll-view>
</view>
<view class="w-3/4 p-2 bg-white flex flex-col h-full">
<view class="flex-grow-0 flex flex-col h-full">
<view class="my-1">
<slot name="title" :current="ctx.current"></slot>
</view>
<scroll-view scroll-y class="flex-grow-0 min-h-0">
<slot name="default"></slot>
</scroll-view>
</view>
</view>
</view>
</template>
<style scoped>
</style>

8
src/pages.json
View File

@ -51,6 +51,14 @@
"navigationBarTitleText": "设备信息",
"enablePullDownRefresh": false
}
},
{
"path": "pages/commodity/commodity",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "商品页",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {

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

@ -1,5 +1,6 @@
<script setup>
import {reactive} from "vue";
import SideBarView from "@/components/sidebar-view/index.vue";
import Item from "./components/item.vue";
const ctx = reactive({
current: 0,
@ -49,34 +50,20 @@ function switchCategory(index) {
</script>
<template>
<view class="flex w-full h-full">
<view class="w-1/4 h-full bg-gray-100">
<scroll-view class="h-full bg-gray-100">
<view v-for="(category, index) in ctx.categories" :key="index"
@click="switchCategory(index)"
:class="{'bg-white': index === ctx.current, 'bg-gray-100': index!== ctx.current}"
class="text-center p-4 rounded">
<text>{{ category.name }}</text>
</view>
</scroll-view>
</view>
<SideBarView :categories="ctx.categories">
<template #title="{current}">
<text>
{{ctx.categories[current].name}}
</text>
</template>
<view class="w-3/4 p-2 bg-white flex flex-col h-full">
<view class="flex-grow-0 flex flex-col h-full">
<view class="my-1">
<text>
{{ctx.categories[ctx.current].name}}
</text>
</view>
<scroll-view scroll-y class="flex-grow-0 min-h-0">
<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/png" title="测试商品" price="9999.99" oldPrice="8888.88"/>
</scroll-view>
</view>
</view>
</view>
<scroll-view scroll-y class="flex-grow-0 min-h-0">
<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/png" title="测试商品" price="9999.99"
oldPrice="8888.88"/>
</scroll-view>
</SideBarView>
</template>
<style scoped>

14
src/pages/commodity/commodity.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<view>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
</style>

10
src/pages/index/components/banner/index.vue
View File

@ -37,11 +37,11 @@ function previewImage(item) {
<category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
<category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
<category-item src="https://www.httpbin.org/image/jpeg" title="美食"></category-item>
<category-item src="https://www.httpbin.org/image/jpeg" title="汽车票"></category-item>
<category-item src="https://www.httpbin.org/image/jpeg" title="宠物"></category-item>
<category-item src="https://www.httpbin.org/image/jpeg" title="汽车票"></category-item>
<category-item src="https://www.httpbin.org/image/jpeg" title="宠物"></category-item>
</view>
</swiper-item>

6
vite.config.js
View File

@ -1,4 +1,5 @@
import path from "path";
import {fileURLToPath, URL} from 'node:url'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
@ -32,4 +33,9 @@ export default defineConfig({
]
},
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})