uni-app 自定义组件引用

快来打我* 2021-07-25 00:24 575阅读 0赞

红框框起来的部分是引入的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

目录结构：

![2019111916314661.png][]

组件页/template/swiper.vue

<template name="uniSwiper">
    	<view class="page-section-spacing">
    		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
    			<swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item>
    			<swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item>
    			<swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item>
    		</swiper>
    	</view>
    </template>
    
    <script>
    export default {
    	name: 'uniSwiper',
    	data() {
    		return {
    			autoplay: true,
    			interval: 3000,
    			duration: 500
    		};
    	}
    };
    </script>
    
    <style>
    .swiper {
    	width: 100%;
    	height: 300px;
    }
    .swiper-item {
    	width: 100%;
    	height: 100%;
    }
    .uni-bg-red {
    	background: red;
    }
    .uni-bg-green {
    	background: #4cd964;
    }
    .uni-bg-blue {
    	background: #007aff;
    }
    </style>

引用页/home/index.vue

<template>
    	<view>
    		
    		<uniSwiper></uniSwiper>
    	</view>
    </template>
    
    <script>
    import uniSwiper from '../template/swiper.vue';
    export default {
    	data() {
    		return {
    		};
    	},
    	onLoad: function() {},
    	components: {
    		uniSwiper
    	},
    	methods: {}
    };
    </script>
    
    <style>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/1bf471edd821422f989b6f57480c60ce.png
[2019111916314661.png]: /images/20210724/5eff7e446bba4d3bbd5ef975d792f236.png

发表评论取消回复

表情：

评论列表（有 0 条评论，575人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 自定义全局组件

在 uni-app 中，自定义全局组件是很容易的。首先，你需要在项目的 `components` 目录下创建一个新文件，例如 `my-component.vue`。然后，在这个

阳光穿透心脏的1/2处/ 2024年03月25日 18:51/ 0 赞/ 48 阅读

相关自定义组件

自定义组件 1、组件的创建与引用 1.1、创建组件在项目的根目录中，鼠标右键，创建 components -> test 文件夹。在新建的 c

深碍√TFBOYSˉ_/ 2024年03月24日 15:44/ 0 赞/ 23 阅读

相关 Uniapp自定义swiper滑动模块

Uniapp自定义swiper滑动模块简介参考文章上代码简介用Uniapp写的App端swiper滑动模块，主要是理解原理，如果后期有

秒速五厘米/ 2022年12月01日 15:43/ 0 赞/ 634 阅读

相关 uniapp 自定义弹窗组件

先上效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

墨蓝/ 2022年10月30日 10:25/ 0 赞/ 655 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 258 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 250 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 267 阅读

相关 uniapp自定义简单弹窗组件

前面写android混编学到了很多，没有时间全部积累起来，后面会慢慢记录的。最近很久没有记录了，因为一个新的uniapp的项目。最近在做这个。看了智慧团建上的弹窗很喜欢

超、凢脫俗/ 2021年11月02日 07:30/ 0 赞/ 852 阅读

相关 uniapp 自定义头部导航

html 引用需要自行更改图片路径 <view class="bac-box"></view>  <view

亦凉/ 2021年07月25日 16:17/ 0 赞/ 1057 阅读

相关 uni-app 自定义组件引用

红框框起来的部分是引入的 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

快来打我*/ 2021年07月25日 00:24/ 0 赞/ 576 阅读