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();
