上拉触底进行节流处理
![](https://img-blog.csdnimg.cn/img_convert/e6e7d57ee716472b90a1ded696782147.png)
在data中定义isloading
![](https://img-blog.csdnimg.cn/img_convert/8bf2ebe1f72a4edab8afce047ace2ebe.png)
发起请求时
![](https://img-blog.csdnimg.cn/img_convert/f0d4d107017e4de9b3bb443222dca331.png)
完成时回调
![](https://img-blog.csdnimg.cn/img_convert/c3c8fc113d9541aca8b7ad0c48e94a09.png)
事件响应式判断
![](https://img-blog.csdnimg.cn/img_convert/56edec8f13df4c58a75f06906dff9435.png)
自定义编译模式:=》编译自动跳转
![](https://img-blog.csdnimg.cn/img_convert/071a2e3457694923936d2d011dc572c4.png)
![](https://img-blog.csdnimg.cn/img_convert/70550dd619cc493b8b108323f7b2d3a9.png)
![](https://img-blog.csdnimg.cn/img_convert/6fd710314f1741f59834e7232b89591c.png)
生命周期:
![](https://img-blog.csdnimg.cn/img_convert/43efbcb32df44698a9872c0d35995fad.png)
![](https://img-blog.csdnimg.cn/img_convert/eed139a56d6d411e93e0929596189184.png)
onlaunch 初始化完成 只执行一次
onShow:切换到前台
onHide:切换到后台
app.js :
![](https://img-blog.csdnimg.cn/img_convert/c28c138a976b4834a99a81340a48a2d9.png)
![](https://img-blog.csdnimg.cn/img_convert/eeb242784de74171a25834f5fd078cb7.png)
![](https://img-blog.csdnimg.cn/img_convert/9538af33026d481b960c2deb4a9063a2.png)
onReady :渲染完成才可以修改页面内容
![](https://img-blog.csdnimg.cn/img_convert/c9fb483673da451b9661df2c84862fe3.png)
WXS帮助页面信息处理过滤
![](https://img-blog.csdnimg.cn/img_convert/b93f09c614ba4a539cf5a44ebf0c3429.png)
![](https://img-blog.csdnimg.cn/img_convert/8a19cf893e504d70aab5923a1a56c597.png)
wxs 引入外联
![](https://img-blog.csdnimg.cn/img_convert/d617c96cd7eb4723b5e4f73f3e3473d5.png)
![](https://img-blog.csdnimg.cn/img_convert/e72b70bfc0c94a97aca3e79ec4682fd0.png)
data定义数据
![](https://img-blog.csdnimg.cn/img_convert/56cd7e000db34d2ca95cc659e6a90440.png)
注意点:
![](https://img-blog.csdnimg.cn/img_convert/15128de85e4f449ebbf568b964755f26.png)
![](https://img-blog.csdnimg.cn/img_convert/39ad1d835bb94ec29695cfc920d62ae9.png)
九宫格区域改造:
![](https://img-blog.csdnimg.cn/img_convert/3a938fe746d241559e427e59b801cedf.png)
![](https://img-blog.csdnimg.cn/img_convert/710047954f6d4cd189b149e59adc3859.png)
data定义数组:
![](https://img-blog.csdnimg.cn/img_convert/37f62302a4104716a128733506224428.png)
![](https://img-blog.csdnimg.cn/img_convert/ccc987611eed454ea497878fdd041279.png)
![](https://img-blog.csdnimg.cn/img_convert/bd79ed679b774f6198fce6990e8c5e74.png)
请求数据:
![](https://img-blog.csdnimg.cn/img_convert/0a4ec602ab624204b755e668add6f00a.png)
加载数据:
![](https://img-blog.csdnimg.cn/img_convert/8ac93bee72804d73a7ac155557602102.png)
![](https://img-blog.csdnimg.cn/img_convert/f3ebc6f345b34bddb1829d22a11c0fec.png)
![](https://img-blog.csdnimg.cn/img_convert/b9377d52fb244c189b68ced0378d660f.png)
实现左右布局:
![](https://img-blog.csdnimg.cn/img_convert/e9733c0e0f7644fe88eb891552780bb3.png)
![](https://img-blog.csdnimg.cn/img_convert/0b6e5a1d074644598dcc70d79c23911b.png)
![](https://img-blog.csdnimg.cn/img_convert/e0a3ffb4702e4c1e83b2f499a50bc6bf.png)
![](https://img-blog.csdnimg.cn/img_convert/05ff65685da44e73a852c6620cffb7a3.png)
![](https://img-blog.csdnimg.cn/img_convert/f625b1482d4e40948afc5447937e343b.png)
![](https://img-blog.csdnimg.cn/img_convert/c8d363cffb7241cc86b3007d4d08aaf8.png)
下拉触底:
定义页面距离
![](https://img-blog.csdnimg.cn/img_convert/6c7b09bf4c2840839133428c068564b3.png)
加载下一页 :
![](https://img-blog.csdnimg.cn/img_convert/75b8dd272ece455e933659874a12556d.png)
设置节流阀
定义bool 在完成加载回调设置false 加载方法里面设置true 触底方法判断
设置网络:=》
![](https://img-blog.csdnimg.cn/img_convert/45029cc08154417f82c065e649ee2f7a.png)
XHR 观察数据请求:
![](https://img-blog.csdnimg.cn/img_convert/e43ad3ed1a114b27871bd1aa9d69a450.png)
![](https://img-blog.csdnimg.cn/img_convert/58c56dfc43e44cd8b4d69eba8e2dd85d.png)
wx.showToast :展示提示框
![](https://img-blog.csdnimg.cn/img_convert/97d34dc37db84e2ba1840d9bce6e71ee.png)
下拉刷新和样式 :
![](https://img-blog.csdnimg.cn/img_convert/382309e0984b42559e81e3f8d74a2a6a.png)
下拉刷新方法 :
![](https://img-blog.csdnimg.cn/img_convert/ad0ca6293ee245e7b60fb272090b72ba.png)
真机关闭下拉刷新
![](https://img-blog.csdnimg.cn/img_convert/2dc04824d2fe42d59032c82b1025f7b7.png)
设置回调参数 传递参数则执行 , 不传则不执行
![](https://img-blog.csdnimg.cn/img_convert/dace7e83d9cc40d8a31b70110ad55360.png)
![](https://img-blog.csdnimg.cn/img_convert/0734700a13e4431e81de1e7986eb25b7.png)
![](https://img-blog.csdnimg.cn/img_convert/d80205dfb3f64b81abe3469e32996379.png)
实现手机号处理:
![](https://img-blog.csdnimg.cn/img_convert/527f8c72ca6842dc9ebb42d50e69aa6f.png)
![](https://img-blog.csdnimg.cn/img_convert/789b69f899d14d8e82d1b78a08823452.png)
![](https://img-blog.csdnimg.cn/img_convert/8511dfe4f4a54ee8ad94dd61c7690f95.png)
![](https://img-blog.csdnimg.cn/img_convert/1a26fc5ac93d45798f29bcad8a25b0b8.png)