uniapp实现页面轮播图及轮播图上的文字显示

轮播图分为从本地获取图片以及从服务器获取图片

1.本地图片

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in banner" class="banner" :key="index">
        <image :src="item"></image>
      </swiper-item>
    </swiper>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      images: [
        '../static/image1.jpg',
        '../static/image2.jpg',
        '../static/image3.jpg'
      ]
    }
  }
}
</script>
 
<style>
.banner {
		display: flex;
		width: 100vw;
		height: 160px;
    }
</style>

 因为本地数据用的较少，所以不多说明，具体样式可参考uniapp官网

2.从服务器中获取数据

如果获取的数据类似下面的数据（具体的图片地址就不写了）

[
{"img1":"/**/**/**/banner1.png",

"newsName":"****"

},
{"img1":"/**/**/**/banner2.png",

"newsName":"****"

}

]

 当从服务器获的数据如上，可以用v-for循环输出。

如下面代码所示，先定义一个banner，用uni.request请求获取服务器的数据，获取后把得到的数据放在banner中，然后通过v-for循环把所有的数据输出

<template>
	<view class="uni-margin-wrap">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banner" class="banner">
				<image :src="item.img1" mode="aspectFill"></image>
				<text class="slide-title">轮播图文字测试</text>
                <!-- <text class="slide-title">{{item.newsName}}</text> -->
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				banner: {}
			};
		},
		onLoad() {
			this.getBanner();
		},
		methods: {
			getBanner() {
				uni.request({
					url: '你的服务器地址',
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data);
						this.banner = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style lang="scss">

    .uni-margin-wrap {
		image {
			width: 100%;
		}
	}

	.banner {
		display: flex;
		width: 100vw;
		height: 160px;

	}

    .slide-title {
		position: absolute;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 10px;
		font-size: 16px;
		width: 100%;
	}
</style>

如果上面代码运行不出错的话大概是这样

 这样的话，一个有文字显示的轮播图就做好了，具体样式可以在style中修改，快来试一试编写你的轮播图吧。

作者声明：轮播图的实现基本就是如此，本文可供各位参考，同时，本文可能会出现错误，望诸位海涵