前言
本文将学习调用组件和接口文档实现首页banner轮播图效果的实现
一、获取数据
二、渲染样式
三、成果展示
四、代码展示
1.index.vue页面
1.1 template
<template>
<view>
<navbar :isHome="true" />
<view style="margin-top: 130rpx;">
<view class="weui-cell" style="background:#fff9eb;">
<view class="weui-cell__hd">
<image src="/static/photo/ic_myapp.png" style="display:block;width:40rpx;height:40rpx;margin-right:14rpx;">
</image>
</view>
<view class="weui-cell__bd">
<text style="color:#be9719;font-size:13px;">点击右上角“添加到我的小程序”,方便下次找到!</text>
</view>
<view class="weui-cell__ft">
<image src="/static/photo/modal_closer.png" style="display:block;width:15px;height:15px;"></image>
</view>
</view>
</view>
<view v-if="slides && slides.length > 0" class="index-swiper">
<swiper autoplay circular :interval="4000" :duration="500">
<!-- <block>空容器,便利数据??? -->
<block v-for="(item,index) in slides" :key="index">
<swiper-item>
<image src="../../static/photo/14.jpg" mode="widthFix" show-menu-by-longpress :data-index="index"></image>
</swiper-item>
<swiper-item>
<image src="../../static/photo/13.jpg" mode="widthFix" show-menu-by-longpress :data-index="index"></image>
</swiper-item>
<swiper-item>
<image src="../../static/photo/12.jpg" mode="widthFix" show-menu-by-longpress :data-index="index"></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
1.2 script
<script setup>
import {
ref,
reactive,
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
const app = getApp()
//定义轮播图数据
const slides = ref([])
onLoad(() => {
app.globalData.utils.getuUserInfo()
app.globalData.utils.request({
url: '/app/init',
success: res => {
//console.log(res)
const {
id
} = res.data.data.area
//通过id获取当前地区的页面数据
app.globalData.utils.request({
url: '/Index/index',
data: {
aid: id
},
success: ({
data
}) => {
//console.log("data", data)
slides.value = data.data.slides //获取轮播图数据
//console.log("slides", slides) //打印到控制台,查看级数//
}
})
}
})
})
</script>
1.3 style
<style lang="scss">
page {
background-color: #fff;
}
.index-swiper {
padding: 20rpx 20rpx 0 20rpx;
overflow: hidden;
}
.index-swiper swiper {
height: 320rpx;
overflow: hidden;
border-radius: 10rpx;
}
.index-swiper swiper-item image {
width: 100%;
height: 100%;
}
</style>
2.utils.js公共逻辑
class utils {
constructor() {
this.baseUrl = 'http://159.75.169.224:7300/pz'
}
//获取用户信息
getuUserInfo() {
//调用登录api
uni.login({
success: res => {
// console.log(res)
//通过request传递进url、data
this.request({
url: '/auth/wxLogin',
data: {
code: res.code //通过code换取用户信息
},
//在success里拿数据
success: res => {
// console.log(res, 'res')
}
})
}
})
}
request(option = {
showLoading: false
}) {
//判断url
if (!option.url) {
return false
}
//判断用户是否需要loding效果
if (option.showLoading) {
this.showLoading()
}
uni.request({
url: this.baseUrl + option.url, //拼接,用户仅传递后面的地址
data: option.data ? option.data : {},
header: option.header ? option.header : {},
method: option.method ? option.method : 'GET',
//想在suess中拿到正确的this(实例),必须要用箭头函数
success: (response) => {
//接口调用成功后取消
uni.hideLoading()
//后端返回数据异常
if (response.data.code != 10000) {
//将失败结果返回出去
//容错判断,是否为函数
if (option.fail && typeof option.fail) {
option.fail(response)
}
} else {
//将成功的结果返回
if (option.success && typeof option.success) {
option.success(response)
}
}
},
//请求可能存在非200的情况
fail: response => {
uni.hideLoading()
// console.log(response)
}
})
}
//创建加载的loading效果
showLoading() {
const isShowLoading = uni.getStorageSync('isShowLoading') //通过缓存判断
if (isShowLoading) {
uni.hideLoading() //关闭其他loading效果
uni.setStorageSync('isShowLoading', false) //设置loding状态
}
//重新打开loding效果
uni.ShowLoading({
title: '加载中...',
complete: function() {
uni.setStorageSync('isShowLoading', true)
}, //成功
fail: function() {
uni.setStorageSync('isShowLoading', false)
},
})
}
}
//导出class实例
export default new utils()