静态结构

新建业务组件src/pages/index/componets/CustomNavbar.vue

script

src/static/images/logo.png/imagetext

classlogo-text新鲜

url(/static/images/navigator_bg.png);background-size:

cover;position:

src/pages/index/componets/CustomNavbar.vue

script

小兔鲜儿项目中总共有两处广告位分别位于【首页】和【商品分类页】。

静态结构

静态结构src/components/XtxSwiper.vue

script

:interval3000swiper-itemnavigator

hover-classnone

classnavigatorimagemodeaspectFillclassimagesrchttps://pcapi-xiaotuxian-front-devtest.i***ima.net/miniapp/uploads/slider_1.jpg/image/navigator/swiper-itemswiper-itemnavigator

hover-classnone

classnavigatorimagemodeaspectFillclassimagesrchttps://pcapi-xiaotuxian-front-devtest.i***ima.net/miniapp/uploads/slider_2.jpg/image/navigator/swiper-itemswiper-itemnavigator

hover-classnone

classnavigatorimagemodeaspectFillclassimagesrchttps://pcapi-xiaotuxian-front-devtest.i***ima.net/miniapp/uploads/slider_3.jpg/image/navigator/swiper-item/swiper!--

指示点

translateY(0);background-color:

#efefef;.indicator

dcloudio/uni-ui/lib/uni-$1/uni-$1.vue,//

Xtx

文件相对应。

它们用于描述库的类型定义和类型推断规则以及函数、类、接口和变量的声明。

JavaScript

number;在上述例子中我们声明了一个名为myModule的模块其中包含一个导出函数myFunction一个导出类MyClass一个导出接口MyInterface和一个导出变量myVariable。

TypeScript

可以提供类型检查和自动补全的功能从而帮助开发者在编写代码过程中减少错误并提高代码的可维护性。

总结来说.d.ts

模块或库的类型信息的。

它们描述了函数、类、接口和变量的声明使得

TypeScript

Toolshttps://github.com/vuejs/language-tools

这段代码是一个声明模块的代码它引入了一个名为XtxSwiper的Vue组件并将其注册为全局组件。

具体来说代码的功能如下

import

./XtxSwiper.vue这行代码引入了一个名为XtxSwiper的Vue组件该组件可能是一个图片轮播组件或其他类型的组件。

declare

vue/runtime-core这行代码声明了一个模块并指定其名称为vue/runtime-core。

export

}这行代码在声明的模块中定义了一个接口GlobalComponents该接口包含了一个XtxSwiper属性。

这个XtxSwiper属性的类型是typeof

XtxSwiper表示它与之前引入的XtxSwiper组件具有相同的类型。

import

中有两个主要的库编译时compiler和运行时runtime。

编译时负责将模板转换为渲染函数而运行时则负责实际的渲染、组件管理等。

vue/runtime-core

运行时的全局类型和功能以便让类型检查器和编辑器能够正确地理解和处理这些扩展。

具体到你的代码它在全局注册了一个名为

XtxSwiper

的组件使得在整个应用中都可以直接使用这个组件而不需要在每个单独的组件中都进行导入和注册。

轮播图指示点

非空断言主观上排除掉空值情况activeIndex.value

ev.detail!.current;

getHomeBannerAPI()console.log(res)bannerList.value

res.resultconsole.log(bannerList.value)

onLoad(()

}()swiper:circulartrue:autoplayfalse:interval3000changeonChangeswiper-item

v-foritem

:keyitem.idnavigatorurl/pages/index/indexhover-classnoneclassnavigatorimage

modeaspectFill

:srcitem.imgUrl/image/navigator/swiper-item/swiper

轮播图总结

classcategorynavigatorclasscategory-itemhover-classnoneurl/pages/index/indexv-foritem

10:keyitemimageclassiconsrchttps://pcapi-xiaotuxian-front-devtest.i***ima.net/miniapp/images/nav_icon_1.png/imagetext

classtext居家/text/navigator/view

/templatestyle

./componets/CategoryPanel.vue;CategoryPanel

设置首页底色为

getHomeCategoryAPI();categoryList.value

onLoad(()