带你用uniapp从零开发一个仿小米商场_9. 轮播图组件封装及使用

导航栏有了,接下来就是轮播图了,轮播图如下,

因为uniapp 官方自己有轮播图,所以这里就不自己写了,直接使用uniapp的轮播图二次开发就好

uniapp的轮播图组件叫swiper ,感兴趣的朋友可以点击链接,直接去看官方文档,也可以看我这里实操

用hbuilderX编译uniapp的代码有一个好处,如下,这个快捷输入

编写uniapp的内置组件时,可以输入u+组件名称,能直接输出内置好的模板

然后直接将images放进去就好

效果如下

能进行展示了,那就开始封装

在根路径下新建components目录,然后右键新建组件,

接下来就能在swiper-imgs组件中将刚刚写好的轮播图复制过来了

并进行一些修改,

  1. 将图片的src属性设置为动态属性,并且声明一个props对象,接收一个swdata数组
  2. swdata数组用来接收父组件传递过来的值
  3. 然后使用template包裹swiper-item标签,并循环swdata数组
  4. 定一个tapEvent事件,作为后续有需求时添加

然后就可以在页面上引用了

import swiperImgs from '@/components/swiper-imgs/swiper-imgs.vue'

页面代码

html 复制代码
<template>
	<view class="">
		
		<!-- <swiper indicator-dots autoplay :interval="3000" :duration="1000" circular>
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/images/demo/demo4.jpg" lazy-load style="height: 350rpx;"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<swiper-imgs :swdata="srcData"></swiper-imgs>
	</view>
	
	
</template>

<script>
	import swiperImgs from '@/components/swiper-imgs/swiper-imgs.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				logoShow:false,
				srcData:[
					{src:'/static/images/demo/demo4.jpg'},
					{src:'/static/images/demo/demo8.jpg'},
					{src:'/static/images/demo/search-banner.png'},
					{src:'/static/images/demo/demo4.jpg'},
					{src:'/static/images/demo/search-banner.png'},
				]
			}
		},
		onLoad() {

		},
		methods: {
			showLogo(){
				this.logoShow=!this.logoShow
			}
		},
		components:{
			swiperImgs
		}
	}
</script>

<style>
	
</style>

效果如下

相关推荐
喵叔哟10 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django