使用uniApp 基于HBuilder做轮播图。

铛铛铛~~~

一。今天我们来使用uniapp制作小程序.

1.首先使用HBuild新建一个项目。

2.打开对应项目的终端。初始化新建package.json文件。

3.下载对应依赖包。npm install @escook/request-miniprogram

（dollar显示不出来o(╥﹏╥)o）

二。在我们项目的入口文件main.js
1.引入对应的包 $http 挂载在uniapp的顶级对象身上。uni.$http=$http

2.设置请求跟路径：$http.baseUrl =''

3.设置请求拦截器 $http.beforeRequest=function(option){ uni.Show }

4.设置响应拦截器 $http.afterRequest = function(){ uni.hideLoading() }

wx上对应的方法使用uni调用。

（官方文档www.npmjs.com/package/@es…

（由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。）

三。 接下来我们就是做home页面的骨架啦 home.vue 输入swiper,选择第二项。会出来我们对应的轮播图对应骨架。 developers.weixin.qq.com/miniprogram…

动态显示对应数据。

indicator-dot轮播图对应的面板指示点。

:autoplay="true" 自动播放

:interval="3000" 自动切换时间间隔

:duration="1000"滑动动画时长

:circular="true" 循环

（参考微信官网：developers.weixin.qq.com/miniprogram… ）

获取数据步骤。

1.data内定义接收轮播图数据 swiperList:[]

2.onLoad(){}方法中调用我们的请求数据方法：this.getSwiperList()

3.获取轮播图数据的方法 uni.$http.get（）方法

methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
  },

设置轮播图的样式。由于前面创建文件时选择的是Sass.需要在插件市场中下载Sass.对应的样式才会起效果。

<style lang="scss">
swiper{
  height: 330rpx;
  // ,并集选择器
 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
</style>

就得到我们的轮播图啦嘻嘻~~~