【微信小程序】动态API+swiper组件实现轮播图+es6的promise

软件小生活

发布于 2021-08-16 11:32:15

1.5K0

发布于 2021-08-16 11:32:15

文章被收录于专栏：软件小生活

动态API+swiper组件实现轮播图

1. 获取轮播图数据接口：https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

pages/index/index.js

Page({
  data: {
    // 轮播图数组
    swiperList: []
  },
  
  onLoad: function (options) {
    // 发送异步请求获取轮播图数据
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (result) => {
        this.setData({
          swiperList: result.data.message
        })
      }
    });
  },

});

2. 加载轮播图数据使用swiper组件实现轮播图

微信小程序官方文档：scroll-view组件

pages/index/index.wxml

<view class="pyg_index">
  <!-- 轮播图开始 -->
  <view class="index_swiper">
    <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator>
          <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 轮播图结束 -->
</view>

问题：

① swiper标签存在默认宽度和高度 100% * 150px

② image标签也存在默认宽度和高度 320px * 240px

解决：

① 先看一下原图的宽高 750px * 340px

② 让图片的高度自适应，宽度等于100%

③ 让swiper标签的宽高变成与图片的宽高一样

④ image标签 mode属性渲染模式

让image标签的宽高和图片的宽高等比例变化 mode="widthFix"

pages/index/index.less

.index_swiper {
  swiper {
    width: 750rpx;
    height: 340rpx;
    image {
      width: 100%;
    }
  }
}

pages/index/index.wxss

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}

3. 发送请求代码的优化问题：发送请求成功后再发送多次请求解决：将原生请求修改为es6的promise request/index.js

export const request = (params) => {
  return new Promise((resolve, reject) => {    
    wx.request({
      ...params,
      success:(result)=>{
        resolve(result);
      },
      fail:(err)=>{
        reject(err);
      }
    });
  })
}

引入用来发送请求的方法：import { } from "module"; “module” 路径一定要补全 "../../request/request.js" pages/index/index.js

// 引入用来发送请求的方法
import { request } from "../../request/request.js";

Page({
  data: {
    // 轮播图数组
    swiperList: []
  },
  
  onLoad: function(options) {
    this.getSwiperList();
  },
  
  // 获取轮播图数据
  getSwiperList() {
    request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
    }).then(result => {
      this.setData({
        swiperList: result.data.message
      })
    })
  },
  
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-08-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript