黑馬程式員 B站課程，有需要可配合學習
1.下拉重繪事件(message頁面中進行)
1.方式
推薦第二種方式
2.配置樣式
3.下拉事件的監聽
4.下拉事件的應用
4.1定義一個按鈕，并定義一個初始值，點擊按鈕將初始值加1，
定義初始值count=0，并定義+1事件
4.2定義下拉將count清零
5.處理下拉重繪但是頁面不回去的問題
2.上拉觸底事件
1.頁面上拉觸底事件的監聽
先定一個能超過整個頁面的view
在.js檔案中設定，并進行下拉觸底，看看到結果
2.配置下拉觸底的距離（滾動條距離底部的距離就行處理）
3.上拉觸底事件實體
3.1獲取隨機顏色并加載
data: {
colorList:[] //隨機顏色串列
},
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:"GET",
success:({data:res}) =>{
console.log(res) //得出資料
this.setData({
colorList:[...this.data.colorList,...res.data] //資料拼接
}) //得出資料并拼接
}
})
}
/**
* 生命周期函式--監聽頁面加載
*/
onl oad: function (options) {
this.getColors() //一開始就要進行獲取
},
3.2渲染UI結構并美化
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
3.3上拉觸底時獲取隨機顏色
再次呼叫.js檔案中
3.4 添加loading的效果
官方檔案：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
3.5對下拉觸底事件進行節流處理
原因：一直獲取，資料會進行累積，降低了存盤效率，
程序：
3.5.1
3.5.2
3.5.3
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400579.html
標籤：其他
下一篇：2022跨年代碼（有煙花）