前言

最近在做微信小程序項(xiàng)目中，有一個(gè)功能就是做一個(gè)商品列表分頁(yè)限流然后實(shí)現(xiàn)上拉加載下拉刷新功能，遇到了一個(gè)使用scroll-viwe組件下拉刷新事件始終不觸發(fā)問(wèn)題，網(wǎng)上很多說(shuō)給scroll-view設(shè)置一個(gè)高度啥的就可以解決，有些人設(shè)置了高度也不觸發(fā)，所以在下就研究了一波這個(gè)scroll-view的觸發(fā)機(jī)制。

一、scroll-view

可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。組件屬性的長(zhǎng)度單位默認(rèn)為px，2.4.0起支持傳入單位(rpx/px)。

兩個(gè)屬性是作為上拉加載下拉刷新觸發(fā)事件
scroll-view屬性bindrefresherrefresh：自定義下拉刷新被觸發(fā)

scroll-view屬性bindscrolltolower：滾動(dòng)到底部/右邊時(shí)觸發(fā)

官網(wǎng)文檔：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

二、上拉加載下拉刷新

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

1. wxml代碼

<scroll-view id="scrollView"  scroll-y="true" style="height: {{windowHeight}}px;"refresher-enabled="{{true}}" refresher-threshold="{{100}}"refresher-default-style="white"refresher-background="rgb(211, 234, 248)"refresher-triggered="{{triggered}}"bindrefresherrefresh="onRefresh"  bindscrolltolower="loadMore"><view class="fruit-list" wx:for="{{fruits}}" wx:key="id"><view class="fruit-item"><image src="{{requestUrl}}{{item.imageUrl}}"></image><view class="mid"><text style="font-weight: bold;">{{item.name}}</text><text style="color: rgb(146, 146, 146);">庫(kù)存{{item.stock}}</text><text style="font-weight: bold;">￥{{item.price}}</text></view><button>選擇</button></view></view>
</scroll-view>

2. wxcc代碼

.fruit-item {display: flex;justify-content: center;align-items: center;
}.fruit-item view {display: flex;flex-direction: column;font-size: 9px;flex: 2;align-items: flex-start;justify-content: center;line-height: 30px;
}.fruit-item image {height: 100px;width: 100px;border-radius: 5px;margin:10px;flex: 3;
}
.fruit-item button {background-color: rgb(219, 207, 137);width: 40px; height: 20px;font-size: 8px;flex: 1;line-height: 5px;
}.mid :first-child{width: 70px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

3. 下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定義

 onRefresh() {// 自己定義刷新事件var self = this;// 自己定義刷新事件self.setData({triggered: true, // 將triggered屬性設(shè)置為true，表示下拉刷新已經(jīng)被觸發(fā)})wx.showToast({title: "刷新成功"})setTimeout(function () {self.setData({triggered: false, // 將triggered屬性設(shè)置為false，表示下拉刷新已完成})console.log('下拉刷新已完成');}, 3000);}

4. 上拉加載

scroll-view觸發(fā)的條件

觸底事件不觸發(fā)有以下情況：

1. scroll-view沒(méi)有設(shè)置高度或者高度設(shè)置太高導(dǎo)致 item總高度 < scroll-view高度下拉過(guò)程中觸不到底
2. scroll-view容器中的item沒(méi)有設(shè)置高度導(dǎo)致 item總高度<scollview高度

注意：如果scroll-view高度 < item總高度且值小于1~4px也是不觸發(fā)的要大于5px這樣才會(huì)觸發(fā)，
例如：scroll-view高度為480px,item總高度為480-484px不會(huì)觸發(fā)

解決方案：

1. scroll-view設(shè)置高度100vh；
2. item設(shè)置一個(gè)適合的高度

100vh

是一個(gè)在網(wǎng)頁(yè)開(kāi)發(fā)中常用的單位，表示相對(duì)于視窗（viewport）高度的百分比。具體來(lái)說(shuō)，它等于視窗高度的百分之一百。在大多數(shù)情況下，該單位用于設(shè)置元素的高度或最小高度，以便使其充滿整個(gè)視窗高度。
例如，如果視窗高度為600像素，那么使用"100vh"將會(huì)等于600像素。這樣，你可以通過(guò)將元素的高度設(shè)置為"100vh"，使其完全填充整個(gè)視窗高度。這在創(chuàng)建全屏幻燈片、背景圖像或需要完全占據(jù)視窗的元素時(shí)非常有用。

下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定義

// 下拉刷新onRefresh() {var self = this;this.setData({triggered: true, // 將triggered屬性設(shè)置為true，表示下拉刷新已經(jīng)被觸發(fā)})this.requestFruitList(this.data.flag, 1, function (data) {// 處理響應(yīng)數(shù)據(jù)，并將新的數(shù)據(jù)覆蓋原有數(shù)據(jù)this.setData({fruits: data.fruits,allPage: data.totalPages,curPage: 1,triggered: false, // 將triggered屬性設(shè)置為false，表示下拉刷新已完成})wx.showToast({title: "刷新成功"})}.bind(this), function (err) {// 處理請(qǐng)求失敗情況console.error(err);wx.showToast({title: "刷新失敗，請(qǐng)重試"})}.bind(this));}

源碼：

const app = getApp()Page({data: {requestUrl: app.globalData.baseUrl,types: [{id: 1,title: "鮮果現(xiàn)切"}, {id: 2,title: "國(guó)產(chǎn)零食"}, {id: 3,title: "特產(chǎn)零食"},{id: 4,title: "肉類蛋食"}, {id: 5,title: "特色小吃"}, {id: 6,title: "牛奶乳品"},{id: 7,title: "水果撈吧"}, {id: 8,title: "當(dāng)即熱銷"}, {id: 9,title: "蔬菜鮮賣"}],fruits: [{id: 1,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}, {id: 2,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"},{id: 3,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}, {id: 4,name: "哈密瓜",price: 29,stock: 100,imageUrl: "/images/ls.jpg"}],flag: 1,triggered: false, // 設(shè)置當(dāng)前下拉刷新?tīng)顟B(tài)，true 表示下拉刷新已經(jīng)被觸發(fā)，false 表示下拉刷新未被觸發(fā)allPage: 1, // 總頁(yè)數(shù)curPage: 1, // 當(dāng)前頁(yè)數(shù)windowHeight: null},// 上拉到底部觸發(fā)loadMore: function () {console.log("加載更多");var self = this;// 為最后一頁(yè)if (self.data.curPage == self.data.allPage) {wx.showToast({title: '沒(méi)有更多了',})} else {setTimeout(function () {console.log("加載更多");var tempCurPage = self.data.curPage;tempCurPage++;self.setData({curPage: tempCurPage})self.requestFruitList(self.data.flag, self.data.curPage, function (data) {// 處理響應(yīng)數(shù)據(jù)，并將新的數(shù)據(jù)添加到原有數(shù)據(jù)之后var newFruits = self.data.fruits.concat(data.fruits);self.setData({fruits: newFruits,allPage: data.totalPages});}, function (err) {// 處理請(qǐng)求失敗情況console.error(err);});}, 300)}},// 下拉刷新onRefresh() {var self = this;this.setData({triggered: true, // 將triggered屬性設(shè)置為true，表示下拉刷新已經(jīng)被觸發(fā)})this.requestFruitList(this.data.flag, 1, function (data) {// 處理響應(yīng)數(shù)據(jù)，并將新的數(shù)據(jù)覆蓋原有數(shù)據(jù)this.setData({fruits: data.fruits,allPage: data.totalPages,curPage: 1,triggered: false, // 將triggered屬性設(shè)置為false，表示下拉刷新已完成})wx.showToast({title: "刷新成功"})}.bind(this), function (err) {// 處理請(qǐng)求失敗情況console.error(err);wx.showToast({title: "刷新失敗，請(qǐng)重試"})}.bind(this));},switchNav: function (e) {var page = this;var id = e.target.id;if (this.data.currentTab == id) {return false;} else {page.setData({currentTab: id});}page.setData({flag: id,curPage: 1});this.requestFruitList(id, page.data.curPage, function (data) {// 處理響應(yīng)數(shù)據(jù)page.setData({fruits: data.fruits,allPage: data.totalPages});}, function (err) {// 處理請(qǐng)求失敗情況console.error(err);});},requestFruitList: function (typeId, curPage, successCallback, failCallback) {wx.request({url: this.data.requestUrl + '/fruit?typeId=' + typeId + '&pageNum=' + curPage,method: 'GET',success(res) {console.log(res.data);// 調(diào)用成功回調(diào)函數(shù)，并將響應(yīng)數(shù)據(jù)作為參數(shù)傳遞successCallback(res.data);},fail(err) {console.error(err);// 調(diào)用失敗回調(diào)函數(shù)，并將錯(cuò)誤信息作為參數(shù)傳遞failCallback(err);}})},onLoad: function (options) {var id = options.id; // 獲取傳遞的參數(shù)console.log('接收到的id參數(shù)為：' + id);var page = this;page.setData({flag: id})this.requestFruitList(id, page.data.curPage, function (data) {// 處理響應(yīng)數(shù)據(jù)page.setData({fruits: data.fruits,allPage: data.totalPages});}, function (err) {// 處理請(qǐng)求失敗情況console.error(err);});// 獲取屏幕高度wx.getSystemInfo({success: function (res) {page.setData({windowHeight: res.windowHeight})console.log('屏幕高度：', res.windowHeight);}})}
})