vue注册组件

旧城等待， 2021-07-26 00:04 419阅读 0赞

<template>
    	<view>
    		<scroll-view :scroll-into-view="'ss'+current" scroll-x="true" style="background-color: #007AFF;padding-top: 20px;">
    			<view class="tabs">
    				<text :id="'ss'+index" @click="chooseTab(index)" :class="{cur:current==index}" v-for="(item,index) in tabs" :key="index">{ { item}}</text>
    			</view>
    		</scroll-view>
    		<swiper :current="current" @change="changeSw" :style="{height:(wh-100)+'px'}">
    			<swiper-item v-for="(item,index) in tabs" :key="index" >
    				<xuezi v-if="current==0"></xuezi>
    				<news v-if="current==1"></news>
    				<meitu v-if="current==2"></meitu >
    				<daiding v-if="current>2"></daiding>
    			</swiper-item>
    		</swiper>
    	</view>
    </template>
    
    <script>
    //注册组件
    	import xuezi from "./subview/xuezi.vue"
    	import meitu from "./subview/meitu.vue"
    	import news from "./subview/news.vue"
    	import daiding from "./subview/daiding.vue"
    	export default { 
    		components:{ xuezi,meitu,daiding,news },
    		data() { 
    			return { 
    				tabs:['百姓商城','网易新闻','穿搭推荐','待定','待定','待定','待定'],
    			    current:0,
    				wh:uni.getSystemInfoSync().windowHeight
    			}
    		},
    		
    		methods: { 
    			changeSw(e){ 
    				console.log(e)
    				this.current=e.detail.current
    			},
    			chooseTab(index){ 
    				console.log(index)
    				this.current=index
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
      .tabs{ 
    	  display: flex;
    	  text{ 
    		  padding: 10px;
    		  white-space: nowrap;
    		  color: white;
    	  }
    	  .cur{ 
    		  color: orange;
    		  border-bottom: 2px solid orange;
    		  font-weight: bold;
    	  }
      }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册一、效果二、代码 1、index.js 2、App.vue 3、首页

痛定思痛。/ 2024年04月06日 15:28/ 0 赞/ 121 阅读

相关 vue注册全局组件的方法

1、在components文件夹下新建package文件夹（文件夹可以随意命名），然后在package文件夹下创建index.js ![在这里插入图片描述][202001

谁借莪１个温暖的怀抱￠/ 2023年02月22日 13:55/ 0 赞/ 212 阅读

相关 vue创建组件和注册组件_创建Cloudinary Vue组件

vue创建组件和注册组件 ![Vue JS][] While React.js has taken much of the attention during the lat

曾经终败给现在/ 2023年02月22日 01:25/ 0 赞/ 74 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 884 阅读

相关 vue中组件的注册方式

组件注册方式分为全局注册，局部注册；全局注册：为了使注册更清晰，我将组件注册的部分单独放到一下文件中了，在utils文件夹下新建文件 components.js 文件，

快来打我*/ 2022年12月17日 07:22/ 0 赞/ 205 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 223 阅读

相关【vue】vue3.x批量注册组件

文章目录前言开始尝试解决最终配置前言在之前用2.x的时候，已经写过一篇文章了：[https://

╰半橙微兮°/ 2022年09月04日 08:57/ 0 赞/ 214 阅读

相关 Vue注册全局组件-弹窗组件

在src目录下新建components文件夹 1.新建module文件夹，然后新建v-alert.vue <template> <transition

短命女/ 2022年05月14日 00:52/ 0 赞/ 286 阅读

相关 vue注册组件

<template> <view> <scroll-view :scroll-into-view="'ss'+current" scroll-x=

旧城等待，/ 2021年07月26日 00:04/ 0 赞/ 420 阅读

相关 vue 创建组件、组件选项、require.context全局自动注册组件

非脚手架环境：根实例: new Vue({ el: 'app', router, data: {

雨点打透心脏的1/2处/ 2021年07月24日 16:31/ 0 赞/ 497 阅读