数据绑定
插值语法，同vue一样
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}" mode=""/>
</swiper-item>
</swiper>
事件绑定
利用bindtap绑定点击事件
<button type="primary" size="default" bindtap="toMessage">跳转到消息页面</button>
导航
编程导航
跳转到被配置为tabbar的页面
//js
toMessage(){
wx.switchTab({
url: '/pages/message/message',
})
}
跳转到非tabbar的页面
//js
toMessage(){
wx.navigateTo({
url: '/pages/message/message',
})
}
声明导航
跳转到被配置为tabbar的页面
需要将open-type属性设置为switchTab
<navigator url="/pages/message/message" open-type="switchTab">跳转到消息页面</navigator>
跳转到非tabbar的页面
可以省略open-type属性
<navigator url="/pages/message/message" open-type="switchTab">跳转到消息页面</navigator>
导航传参
声明导航传参
<navigator url="/pages/info/info?name=zhangsan&age=23">跳转到info页面</navigator>
编程导航传参
//页面结构
<button type="primary" size="default" bindtap="toInfo">跳转到Info页面</button>
//js代码
toInfo(){
wx.navigateTo({
url: '/pages/info/info?name=lisi&age=45',
})
}
接收参数
onload事件中携带的参数options
//跳转到的页面的js
data: {
query:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options);
this.setData({
query:options
})
},
下拉刷新
局部页面设置
在对应的页面的JSON文件中配置：
{
"usingComponents": {},
"enablePullDownRefresh": true,//启用下拉刷新
"backgroundColor": "#efefef",//设置背景颜色
"backgroundTextStyle": "dark"//设置点的颜色
}
全局设置
app.json文件中配置（所有页面都会生效）：
{
"usingComponents": {},
"enablePullDownRefresh": true,//启用下拉刷新
"backgroundColor": "#efefef",//设置背景颜色
"backgroundTextStyle": "dark"//设置点的颜色
}
监听下拉刷新事件
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("用户刷新了页面");
},
停止刷新行为
wx.stopPullDownRefresh
onPullDownRefresh() {
console.log("用户刷新了页面");
this.setData({
num:0
})
wx.stopPullDownRefresh({
success: (res) => {},
fail: (res) => {},
complete: (res) => {},
})
},
通过给需要停止刷新的事件传入回调并在请求完成时执行传入的回调，防止性能浪费
onPullDownRefresh() {
this.setData({
page:1,
total:0,
shopList:[]
})
//传入执行停止刷新的回调
this.getShopList(()=>{
wx.stopPullDownRefresh()
})
getShopList(callback){
this.setData({
isloading:true
})
wx.showLoading({
title: '数据加载中...',
})
wx.request({
url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pageSize
},
success:(res)=>{
console.log(res);
this.setData({
shopList:[...this.data.shopList,...res.data],
total:+res.header['X-Total-Count']
})
},
complete:(res)=>{
wx.hideLoading()
//每次请求完成都执行停止刷新并不合理
//wx.stopPullDownRefresh()
//在请求完成时用短路与判断是否传入回调，有就执行
callback && callback()
this.setData({
isloading:false
})
}
})
},
},
上拉触底
对应的事件监听回调
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
配置触底距离
页面的json文件或者app.json文件
{
"usingComponents": {},
"onReachBottomDistance": 0
}
显示触底的提示：wx.showLoading({title: '数据加载中。。。'})
对触底事件实现节流
data: {
colorList:[],
//节流阀
isloading:false
},
getColors(){
this.setData({
//关闭节流阀
isloading:true
})
wx.showLoading({
title: '数据加载中。。。',
})
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method:'GET',
success:({data:res})=>{
console.log(res);
this.setData({
colorList:[...this.data.colorList,...res.data]
})
},
complete:()=>{
wx.hideLoading()
this.setData({
//开启节流阀
isloading:false
})
}
})
},
onReachBottom() {
//根据节流阀状态判断是否执行方法
if (!this.isloading) {
this.getColors()
}
},
微信提示框
wx.showToast通过title和icon设置提示文本和显示图标
网络数据请求
不同于AJAX请求，小程序中的请求一般称为网络数据请求，由于其宿主环境是微信客户端而不是浏览器，因此也不存在跨域问题。
