uniapp开发微信小程序笔记4-自定义组件

embedded/2024/11/21 18:56:46/

htmledit_views">

前言：本文重点记录的是uniapp如何封装一个自定义组件，以swiper组件为例。

一、创建组件目录

官方文档中的easycom组件规范中可以看到这样一句话：

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构。就可以不用引用、注册，直接在页面中使用。

所以当我们要做一个swiper自定义组件时，就需要新建components目录，再新建组件--输入组件名称-勾选创建同名目录

这样创建的组件就不用引入，可以直接使用

二、写自定义组件代码

这里用的是内置组件swiper，相关参数可以看官方文档，很清晰

<template><view><swiper class="banner" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000":duration="1000"><swiper-item class="banner_item"><text>1</text></swiper-item><swiper-item class="banner_item"> <text>2</text></swiper-item><swiper-item class="banner_item"> <text>3</text></swiper-item></swiper></view>
</template><script>export default {name: "home-swiper",data() {return {};}}
</script><style lang="scss">.banner {padding: 20rpx;.banner_item {width: 100%;background-color: aqua;}}
</style>