uniapp 3分钟集成轮播广告图

先上效果图

顶部广告栏为 移动app常见需求,今天主要演示如何快速实现.这里还是基于 《星云erp-移动版》演示版

(自行下载 导入 Hbuilder, 后端接口可以直接使用我演示接口,不需要修改)

第一步: 组件选择

我们直接使用uni-swiper-dot 组件,具体介绍见官方:uni-app官网

注意事项

  • uni-swiper-dot组件依赖 swiper 组件,请与swiper组件配合使用

  • widthheight 如非必要,请勿设置过大,或者过小

  • swiper-item 尽量控制在一定数量之内,否则指示点可能会超出屏幕

  • 暂不支持垂直方向的指示点

第二步 : (以首页整合为例)

文件在pages的根目录下

在<view class="mine-container">下添加uni-swiper-dot代码

		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

第三步: 在data中定义相关图片数据

data: [{
						image: 'http://xy.wecando21cn.com/static/images/banner/banner01.jpg'
					},
					{
						image: 'http://xy.wecando21cn.com/static/images/banner/banner02.jpg'
					},
					{
						image: 'http://xy.wecando21cn.com/static/images/banner/banner03.jpg'
					}
				],

第四步:在methods中添加对应js方法,这里我只是做了切换 方法,其他可以参考官方

changeSwiper(e) {
				this.current = e.detail.current
			},

第五步,对应样式

/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */

	.title {
		font-size: 16rpx;
		color: #8f8f94;
	}

	/*以下为轮播图样式*/
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

到这里 一个如效果图的轮播广告已经集成完成。

完整代码见 下载的 《星云erp-移动版

相关推荐
林涧泣9 小时前
【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题
前端·vue.js·uni-app
寰宇软件2 天前
PHP场馆预定系统小程序
小程序·uni-app·vue·php
林涧泣2 天前
【Uniapp-Vue3】触底加载更多
uni-app
新青年.3 天前
【uniapp】uniapp使用java线程池
javascript·uni-app
答题卡上的情书3 天前
uniapp版本升级
前端·javascript·uni-app
向明天乄3 天前
uniapp 地图添加,删除,编辑标记,在地图中根据屏幕范围中呈现标记
android·java·uni-app
大叔_爱编程3 天前
wx044基于springboot+vue+uniapp的智慧物业平台小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣3 天前
【Uniapp-Vue3】图片lazy-load懒加载
uni-app
大叔_爱编程5 天前
wx043基于springboot+vue+uniapp的智慧物流小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣6 天前
【Uniapp-Vue3】StorageSync数据缓存API
前端·javascript·uni-app