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

2021-08-2109:34:43APP与小程序开发Comments2,225 views字数 1340阅读模式

动态API+swiper组件实现轮播图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

微信小程序开发:动态API+swiper组件实现轮播图+es6的promise文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

1. 获取轮播图数据
接口:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

微信小程序开发:动态API+swiper组件实现轮播图+es6的promise文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

2. 加载轮播图数据
使用swiper组件实现轮播图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

微信小程序官方文档:scroll-view组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

微信小程序开发:动态API+swiper组件实现轮播图+es6的promise文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.wxml文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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>

问题:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

① swiper标签存在默认宽度和高度 100% * 150px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

② image标签也存在默认宽度和高度 320px * 240px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

解决:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

① 先看一下原图的宽高 750px * 340px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

② 让图片的高度自适应,宽度等于100%文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

③ 让swiper标签的宽高变成与图片的宽高一样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

④ image标签 mode属性 渲染模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

让image标签的宽高和图片的宽高等比例变化 mode="widthFix"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

pages/index/index.less文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

pages/index/index.wxss文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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

3. 发送请求代码的优化
问题:发送请求成功后再发送多次请求
解决:将原生请求修改为es6的promise
request/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html

// 引入用来发送请求的方法import { request } from "../../request/";
Page({  data: {    // 轮播图数组    swiperList: []  },    onLoad: function(options) {    this.getSwiperList();  },    // 获取轮播图数据  getSwiperL
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22271.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/22271.html

Comment

匿名网友 填写信息

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

确定