uniapp笔记-swiper组件实现轮播图

思路

主要就是参考

swiper | uni-app官网

实现轮播图。

实例

新建一个banner.vue通用组件。

代码如下:

javascript 复制代码
<template>
	<view>
		轮播图
	</view>
</template>

<script>
</script>

<style>
</style>

随后在index.vue中导入banner相关代码:

javascript 复制代码
<template>
	<view class="index-box">
		<bannerVue></bannerVue>
	</view>
</template>

<script>
	import bannerVue from '../../components/common/banner.vue'
	export default {
		components: {bannerVue},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
</style>

运行效果如下:

下面把图片放进去,在在static中新建images目录,如下图:

查询下swiper的相关文档

对swiper进行如下补充(修改banner.vue代码)并做一些css样式:

javascript 复制代码
<template>
	<view class="banner-box">
		<view class="banner-bg"></view>
		<swiper class="banner-swipper"  indicator-dots indicator-color="#007aff"
		indicator-active-color="#4cd964"
		autoplay="4000">
		<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
			<image :src="item.imageUrl"></image>
		</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		props: {
			bannerList:{
				type: Array,
				default: () => [
					{
						id: 1,
						imageUrl: '/static/images/01.png',
						background: '#009B8C'
					},
					{
						id: 2,
						imageUrl: '/static/images/02.png',
						background: '#729B8C'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.banner-box{
		padding-top: 60rpx;
		.banner-bg{
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			background-image: linear-gradient(red 50%, #FFF);
			transform: .5s;
		}
		.banner-swipper{
			width: 100%;
			height: 350rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>

运行截图如下:

在此进行优化下:

javascript 复制代码
<template>
	<view class="banner-box">
		<view class="banner-bg" :style="{'background-image': `linear-gradient(${bannerBackground || `#32DC2`} 50%, #FFF)`}"></view>
		<swiper class="banner-swipper"  indicator-dots indicator-color="#007aff"
		indicator-active-color="#4cd964"
		autoplay="4000" 
		circular
		:current="current" @change="swiperChange">
		<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
			<image :src="item.imageUrl"></image>
		</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		props: {
			bannerList:{
				type: Array,
				default: () => [
					{
						id: 1,
						imageUrl: '/static/images/01.png',
						background: '#009B8C'
					},
					{
						id: 2,
						imageUrl: '/static/images/02.png',
						background: '#729B8C'
					}
				]
			}
		},
		data(){
			return {
				current: 0, //当前滑块的index
				bannerBackground: '#009B8C'	//背景色
			}
		},
		methods:{
			swiperChange(e){
				// console.log(e.detail.current)
				this.current = e.detail.current
				this.bannerBackground = this.bannerList[this.current].background
			}
		}
	}
</script>

<style lang="scss">
	.banner-box{
		padding-top: 60rpx;
	
		.banner-bg{
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			background-image: linear-gradient(red 50%, #FFF);
			transform: .5s;
		}
		.banner-swipper{
			width: 100%;
			height: 350rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>

运行截图如下:

相关推荐
Ramos丶2 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~12 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_4116719821 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
X_StarX29 分钟前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年2 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
智者知已应修善业2 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6