小程序开发(五)

上拉触底进行节流处理

小程序开发(五)_第1张图片

在data中定义isloading

发起请求时

完成时回调

小程序开发(五)_第2张图片

事件响应式判断

小程序开发(五)_第3张图片

自定义编译模式:=》编译自动跳转

小程序开发(五)_第4张图片
小程序开发(五)_第5张图片

生命周期:

小程序开发(五)_第6张图片
小程序开发(五)_第7张图片

onlaunch 初始化完成 只执行一次

onShow:切换到前台

onHide:切换到后台

app.js :

小程序开发(五)_第8张图片
小程序开发(五)_第9张图片

小程序开发(五)_第10张图片

onReady :渲染完成才可以修改页面内容

WXS帮助页面信息处理过滤

小程序开发(五)_第11张图片
小程序开发(五)_第12张图片

wxs 引入外联

小程序开发(五)_第13张图片
小程序开发(五)_第14张图片

data定义数据

小程序开发(五)_第15张图片

注意点:

小程序开发(五)_第16张图片

小程序开发(五)_第17张图片

九宫格区域改造:

小程序开发(五)_第18张图片
小程序开发(五)_第19张图片

data定义数组:

小程序开发(五)_第20张图片

小程序开发(五)_第21张图片

小程序开发(五)_第22张图片

请求数据:

小程序开发(五)_第23张图片

加载数据:

小程序开发(五)_第24张图片

小程序开发(五)_第25张图片
小程序开发(五)_第26张图片

实现左右布局:

小程序开发(五)_第27张图片
小程序开发(五)_第28张图片
小程序开发(五)_第29张图片
小程序开发(五)_第30张图片

小程序开发(五)_第31张图片

下拉触底:

定义页面距离

小程序开发(五)_第32张图片

加载下一页 :

小程序开发(五)_第33张图片

设置节流阀

定义bool 在完成加载回调设置false 加载方法里面设置true 触底方法判断

设置网络:=》

小程序开发(五)_第34张图片

XHR 观察数据请求:

小程序开发(五)_第35张图片

小程序开发(五)_第36张图片

wx.showToast :展示提示框

小程序开发(五)_第37张图片

下拉刷新和样式 :

小程序开发(五)_第38张图片

下拉刷新方法 :

小程序开发(五)_第39张图片

真机关闭下拉刷新

小程序开发(五)_第40张图片

设置回调参数 传递参数则执行 , 不传则不执行

小程序开发(五)_第41张图片
小程序开发(五)_第42张图片
小程序开发(五)_第43张图片

实现手机号处理:

小程序开发(五)_第44张图片
小程序开发(五)_第45张图片

你可能感兴趣的:(小程序,前端)