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

2021年8月21日09:34:43 发表评论 62 views

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

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

1. 获取轮播图数据
接口:

pages/index/index.js

Page({  data: {    // 轮播图数组    swiperList: []  },    onLoad: function (options) {    // 发送异步请求获取轮播图数据    ({      url: '',      success: (result) => {        this.setData({          swiperList:         })      }    });  },
});

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

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

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

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

pages/index/index.wxml

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="{{}}">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) => {        ({      ...params,      success:(result)=>{        resolve(result);      },      fail:(err)=>{        reject(err);      }    });  })}

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

// 引入用来发送请求的方法import { request } from "../../request/";
Page({  data: {    // 轮播图数组    swiperList: []  },    onLoad: function(options) {    this.getSwiperList();  },    // 获取轮播图数据  getSwiperL

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: