vue 导航栏菜单栏轮播图滚动文字封装组件

1. vue 封装了手机浏览器一些组件，代码下载地址：shop-mintui.rar
   效果如下图：
   
2. 安装 mint ui 命令如下：

  npm install --save mint-ui

4. main.js引入mint ui

import Vue from 'vue'
import App from './App.vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.config.productionTip = false
Vue.use(MintUI)

new Vue({
   
  render: h => h(App),
}).$mount('#app')

4. 项目目录如下：
   data目录里面放的模拟后端数据
5. Home.vue代码如下：

<template>
	<div>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="首页">
				<div class="header-search">
					<WySearch @inputValue="inputValue"></WySearch>
					<WyBavBar @ClassifyEvent="ClassifyEvent" @NavEvent="NavEvent" :navlist="navlist"></WyBavBar>
					<WyBanner></WyBanner>
					<WyMarquee></WyMarquee>
					<WyPicTab></WyPicTab>
					<img src="../assets/让安心到家.png" style="width: 98%; margin-top: 8px"></img>
				</div>

			</mt-tab-container-item>
			<mt-tab-container-item id="分类">
				<mt-cell v-for="n in 50" :key="n" title="分类"> 分类{
   {
   n}}</mt-cell>
			</mt-tab-container-item>
			<mt-tab-container-item id="疯抢榜">
				<mt-cell v-for="n in 50" :key="n" title="疯抢榜"> 疯抢榜{
   {
   n}}</mt-cell>
			</mt-tab-container-item>
			<mt-tab-container-item id="发圈素材">
				<mt-cell v-for="n in 70" :key="n" title="发圈素材">发圈素材 {
   {
   n}}</mt-cell>
			</mt-tab-container-item>
			<mt-tab-container-item id="我的">
				<mt-cell v-for="n in 100" :key="n" title="我的"> 我的{
   {
   n}}</mt-cell>
			</mt-tab-container-item>
		</mt-tab-container>


		<mt-tabbar v-model="selected" :fixed="true" style="z-index: 3;">
		
		
			<mt-tab-item id="首页">
				<img slot="icon" src="../assets/footericon/home.png">
				首页
			</mt-tab-item>
			<mt-tab-item id="分类">
				<img slot="icon" src="../assets/footericon/feilei.png">
				分类
			</mt-tab-item>
			<mt-tab-item id="疯抢榜">
				<img slot="icon" src="../assets/footericon/remen.png">
				疯抢榜
			</mt-tab-item>
			<mt-tab-item id="发圈素材">
				<img slot="icon" src="../assets/footericon/sucai.png">
				发圈素材
			</mt-tab-item>
			<mt-tab-item id="我的">
				<img slot="icon" src="../assets/footericon/my.png">
				我的
			</mt-tab-item>
		</mt-tabbar>
	</div>
</template>

<script>
	import WySearch from '../components/Wy-Search.vue'
	import WyBavBar from '../components/Wy-NavBar.vue'
	import WyMarquee from '../components/Wy-Marquee.vue'
	import WyBanner from '../components/Wy-Banner.vue'
	import WyPicTab from '../components/Wy-PicTab.vue'
	
	export default {
   
		components: {
   
			WySearch,
			WyBavBar,
			WyMarquee,
			WyBanner,
			WyPicTab
		},
		data() {
   
			return {
   
				selected: '首页',
				bannerlist:[],
				navlist: []
			}
		},
		methods: {
   
			inputValue(keyword) {
   
				console.log("keyword=" + keyword)
			},
			ClassifyEvent(){
   
				this.selected="分类"
			},
			NavEvent(json) {
   
				console.log("NavEvent,json=" + json);
				console.log(json.catId + "," + json.shopType + "," + json.sort);
			}
		},
		created() {
   
			let navbar = require('../data/navbar.json');
			if(navbar.code==0)
				this.navlist = navbar.data;
			
		}

	}
</script>

<style scoped="scoped">
	.header-search {
   
		height: 24vh;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 2;
		background-color: #ff0080;
		border-radius: 0px 0px 10px 10px;
	}

</style>

6. 轮播图组件Wy-Banner.vue内容如下：

<template>
	<mt-swipe :auto="4000">
		
		<mt-swipe-item v-for="banner in bannerlist" :key="banner.id"><img class="swipe-img" :src="banner.picurl" /></mt-swipe-item>
	
	</mt-swipe>
</template>

<script>
	export default{
   
		
		data(){
   
			return {
   
				bannerlist:[]
			}
		},
		created(){
   
			let banner = require('../data/banner.json');
			if(banner.code == 0)
				this.bannerlist = banner.data;
		}
	}
</script>

<style scoped="scoped">
	
	.swipe-img {
   
		height: 100%;
		border-radius: 8px;
	}
</style>

7. 滚动消息组件，Wy-Marquee.vue代码如下：

<template>
	<div style="display:flex;padding-top: 5px;">
		<div id="title">头条<span style=