14天速成小程序开发：第九章 首页banner轮播图效果的实现

---

前言

本文将学习调用组件和接口文档实现首页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()