轮播图，uni-app官网

1.uni-app官网

 uni-app官网地址: <https://uniapp.dcloud.net.cn/>

2.轮播图

template详情

<template>    <view class="u-demo-block">      <view class="uni-margin-wrap" >			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"				:duration="duration">				<block v-for="(item,index) in imgs" :key="index">					<swiper-item >						<image class="swiper-item" :src="item"></image>					</swiper-item>				</block>			</swiper>		</view>    </view></template>

Script详情

<script>    export default {        data() {            return {               imgs: [                    'http://p1.music.126.net/0BO8Vb36psFJ2GHpBFbFCQ==/109951167851767968.jpg?imageView&quality=89',                    'http://p1.music.126.net/pN4THd1FdcFezaxpXpZk2w==/109951167851777214.jpg?imageView&quality=89',                    'http://p1.music.126.net/li4_CBhiROFq0GAhOT5Yrg==/109951167851780906.jpg?imageView&quality=89',                    'http://p1.music.126.net/kZV0r0sdeuuH0vLA4b_tOg==/109951167851789180.jpg?imageView&quality=89'                  ],                  indicatorDots: true,                  autoplay: true,                  interval: 2000,                  duration: 500,                  swiperList:[],		   }	   },	   onShow(){       //调用函数		   this.loadSwiper()	   },	   methods: {		   changeIndicatorDots(e) {			   this.indicatorDots = !this.indicatorDots		   },         //请求后台数据的方法		  // async loadSwiper(){			 	// let ret = await uni.$get('地址后缀名')         //定义空数组去接收后台数据			  // this.swiperList = ret		  // }	   }   }</script>

$get请求方法的封装

新建utils文件，在文件下面新建request.js文件

let $request = (url,data,method="GET")=>{	return new Promise((resolve,rejects)=>{		uni.request({      //地址			url:'http:///192.168.88.102:18080/'+url,			method,			data,			success:({data})=>{				resolve(data)			}		})	})} let $get = (url,data)=>{	return $request(url,data,'GET')}let $post = (url,data)=>{	return $request(url,data,'POST')}uni.$request = $requestuni.$get = $getuni.$post = $post

创建完成后，在main.js中引入request.js文件

//导入request.jsimport '@/utils/request.js'

CSS样式布局

<style lang="scss">   .uni-margin-wrap {   		width: 690rpx;   		width: 100%;   	}   	.swiper {   		height: 300rpx;   	}   	.swiper-item {   		display: block;   		height: 300rpx;   		line-height: 300rpx;   		text-align: center;   	}</style>