玩转微信小程序 (自定义组件轮播图)

最新推荐文章于 2024-04-29 11:32:32 发布

QuantumYou

最新推荐文章于 2024-04-29 11:32:32 发布

阅读量571

点赞数 1

分类专栏：前端文章标签：小程序 javascript

本文链接：https://blog.csdn.net/QuantumYou/article/details/113402147

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

自定义组件
- 使用自定义组件
小程序轮播图制作

自定义组件

在components 文件夹下定义自定义组件
在这里插入图片描述

使用自定义组件

使用组件
在将使用自定义组件的页面中引入位于index.json

关于自定义组件遇到的问题总结：
在这里插入图片描述
跳转链接

小程序轮播图制作

index.js

请求数据
在这里插入图片描述

跳转链接

运用promise

如果存在多级wx.request 会出现回调地狱
解法：运用ES6 promise语法糖（基础ajax）
在 request 文件夹下 index.js （将异步请求封装于此）
在这里插入图片描述
request 文件夹下 index.js代码：

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

涉及JS 的模块与导入知识点

index 文件夹 index.js 完整代码：

import { request } from "../../request/index.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
      })
    })
  },
  
})