uniapp封装request请求，常用公共函数等，非常实用
1、项目目录如下图，utils目录下的文件和main.js文件在下面可以直接下载使用
2、demo案例，前端代码
<template>
<view class="wrap">
<!-- 首页轮播图 -->
<view class="index-swiper">
<swiper :autoplay="autoplay" :duration="duration" :circular="circular" style="height: 350rpx;">
<block v-for="(item, index) in banner" :key="index">
<swiper-item :key="index">
<navigator :url="item.link" class="lunbo_navigator">
<image :src="item.url" class="slide-image" mode="aspectFill"></image>
</navigator>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 轮播图初始化数据
banner: [],
current: 0,
circular: true,
autoplay: true,
interval: 3000,
duration: 800,
}
},
onLoad() {
getBanner(this);
}
}
// 请求轮播图接口
function getBanner(that){
that.$http.httpGet('/v1/app.php',{
type: 'banner',
}).then((res) => {
var shopsInfo = [];
for (var i = 0; i < res.data.length; i++) {
shopsInfo.push({
url: that.$config.uni_app_web_url + res.data[i].litpic
});
}
that.banner = shopsInfo;
}).catch((error) => {
console.log(error);
});
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 10rpx 10rpx;
}
/* 轮播样式 &&&&&& 开始 */
.index-swiper {
position: relative;
width: 96%;
margin-left: 2%;
border-radius: 10rpx;
overflow: hidden;
}
.lunbo_navigator {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.slide-image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
</style>
3、后端代码示例
<?php
// 获取banner
if ($type == 'banner') {
$res = Db::table('base_config')->where('banner',1)->select();
return json(array('code' => 0,"msg" => "获取成功!","data" => $res));
}
?>
