小程序-引进阿里图标-切换样式-请求接口-数据加载框

1.引进阿里图标

1.iconfont阿里图标库用github账号去登录

    2.新建图标库

    3.搜索图标名，添加入库后到购物车添加到指定的项目

    4.在当前的项目库下载， 注意要选择font class，如果添加了新的图标，需要更新一下代码，复制代码在浏览器上打开，

    5.下载到本地修改后缀名为.wxss 导入到项目

        @import './style/iconfont.wxss';

   6.使用.<view class="iconfont icon-shoucang"></view>

2.切换样式

1.在wx:for=' '中设置class设置三元表达式,给active 设置样式

class="  {{ currentTab === index ?  ' active '  : ' ' }} "

2.在data中设置 currentTab:0,

3.绑定点击事件,携带参数index过去

@tap="handleTap({{index}})

4.在方法中设置点击事件,currentTab = index;

methods = {

    handleTap:function (index) {

      this.currentTab = index;

    }

  }

3.请求接口

1.在onLoad(){ }中请求

onLoad() {

    // 请求接口

    wx.request({

      url:'https://www.itjustfun.cn/api/public/v1/goods/search',

      success: res =>{

        console.log(res.data)

        3.赋值

         this.goodsList = res.data

        4.异步还要执行

        this.$apply()

      }

    })

  }

2.在data里设置一个数组 goodsList:[ ]

5.遍历设置,取值

4.请求接口(要从前一个页面取参数的)

1.从跳转页面去参数

    1.设置点击事件携带参数  @tap="handTap({{传递的参数}}

    2.携带参数,跳转页面, 在methods中

handlesearch:function (keyWord) {

        // 跳转

        wx.navigateTo({

            url:`/pages/search-list`?keyWord=${keyWord}`

        })

    }

3.在onLoad接收参数

onLoad(options) {

const { keyWord } = options

4.在请求接口里传递接口

data:{ 名字:keyWord },

}

5.加载弹窗提示

1.在请求数据请(wx.request)设置

// 设置加载的弹窗提示

      wx.showLoading({

        title:'请求数据中'

      });

2.在成功接收数据后

//隐藏加载弹窗提示框

        wx.hideLoading();