uni-app Banner ( 轮播图 ) 实现

逃离我推掉我的手 2021-12-05 05:49 1002阅读 0赞

## Banner ##

`Banner` 的实现使用的是 `swiper` 组件实现，在`swiper`组件里面添加`swiper-item`组件即可实现

## 例子 ##

<view class="page-section-spacing">
    	<swiper class="swiper" 
    		indicator-dots="true" 
    		autoplay="true" 
    		interval="5000" 
    		duration="1500"	>
    		<swiper-item v-for="(item , index) in homeSlide" :key="index">
    			<image :src="item.img" mode="aspectFill"></image>
    		</swiper-item>
    	</swiper>
    </view>

从上面的例子可以看出`swiper`组件有一些属性，更多属性文档参考 [swiper 组件][swiper]

*  indicator-dots 表示是否显示指示器，默认是 false
 *  autoplay 表示是否自动轮播，默认是 false
 *  interval 表示自动切换的时间间隔，默认是 5000ms
 *  duration 表示滑动动画时长，默认是 500ms

Tip: 这里的高度是通过`class="swiper"` 去设置的，例如我想设置轮播图的高度为 `400upx`

.swiper{
    	height: 400upx;
    }
    
    // swiper-item 里面的图片高度
    swiper-item image{
    	width: 100%;
    	height: 400upx;
    }

布局搞定之后就开始填充数据了，这里的数据是从服务器请求返回的结果

伪代码如下：

定义一个数组，用于接收服务器返回的 banner 数组
    
    data() {
    	return {
    		homeSlide: [], // 定义值接收轮播图数据
    	}
    },
    
    在 onLoad 生命周期中 获取服务器接口，返回成功后将结果绑定到 布局中
    getHomeSlideFunc() {
    	var _self = this;
    	uni.request({
    		url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',
    		success: (res) => {
    			_self.homeSlide = res.data.post;
    		}
    	});
    },

[swiper]: https://uniapp.dcloud.io/component/swiper

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript做banner轮播图

JavaScript之banner轮播图 > 轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变

超、凢脫俗/ 2023年06月17日 05:57/ 0 赞/ 8 阅读

相关 uni-app Banner ( 轮播图 ) 实现

例子： <view class="page-section-spacing"> <swiper class="swiper" indicato

喜欢ヅ旅行/ 2023年02月08日 15:59/ 0 赞/ 601 阅读

相关 uniapp轮播图

<template> <view class=""> <swiper class="swiper" :indicator-dots="indica

ゝ一世哀愁。/ 2023年01月11日 09:10/ 0 赞/ 165 阅读

相关 js 实现banner轮播

<div id="Banner"> <ul id="fcimg"> <{section nam

矫情吗；*/ 2022年08月22日 14:13/ 0 赞/ 241 阅读

相关 Android——Banner无限轮播图

示例图： ![Center][] 在build.gradle中添加依赖 compile 'com.youth.banner:banner:1.4.9'

小咪咪/ 2022年06月06日 09:36/ 0 赞/ 259 阅读

相关自动轮播banner图

Html代码： <div class="banner"> <img src="images/c.jpg"> <img src="images

太过爱你忘了你带给我的痛/ 2022年02月17日 08:09/ 0 赞/ 313 阅读

相关 uni-app Banner ( 轮播图 ) 实现

Banner `Banner` 的实现使用的是 `swiper` 组件实现，在`swiper`组件里面添加`swiper-item`组件即可实现例子 <

逃离我推掉我的手/ 2021年12月05日 05:49/ 0 赞/ 1003 阅读

相关 Flutter 实现轮播图banner

先上效果图： ![20190731202927595.gif][] flutter的Swiper控件，实现无线轮播： 1.准备首先打开pubspec.yam

野性酷女/ 2021年11月14日 12:40/ 0 赞/ 480 阅读

相关 flutter banner轮播图

仓库地址： `https://pub.dev/packages/flutter_swiper` 加yaml文件中加入依赖，目前可能为比较好用的banner轮播图

柔光的暖阳◎/ 2021年08月19日 16:40/ 0 赞/ 422 阅读

相关 uniapp 轮播图

<swiper indicator-dots 是否添加圆点指示器 circular 是否可以循环滑动 autoplay 自动轮播

我就是我/ 2021年07月24日 13:10/ 0 赞/ 701 阅读