Preface
Recently, while working on a WeChat mini program project, one of the functions is to create a product list with paging and current limiting and then implement the pull-up, load, and pull-down refresh function. I encountered a problem where the pull-down refresh event using the scroll-viwe component never triggers. Many people on the Internet said that scroll -View can be solved by setting a height or something. Some people do not trigger it even if they set the height, so I will study the triggering mechanism of this scroll-view.
1. scroll-view
Scrollable view area. When using vertical scrolling, you need to give scroll-view a fixed height and set the height through WXSS. The length unit of component attributes defaults to px, and the input unit (rpx/px) is supported starting from 2.4.0.
The two attributes are as pull-up loading pull-down refresh trigger event
scroll-view attributes bindrefresherrefresh: custom pull-down refresh is triggered
scroll-view attribute bindscrolltolower: triggered when scrolling to the bottom/right
Official website documentation: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
2. Pull up to load and pull down to refresh
Tip: The following is the text of this article. The following cases are for reference.
1. wxml code
<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);">库存{
{item.stock}}</text>
<text style="font-weight: bold;">￥{
{item.price}}</text>
</view>
<button>选择</button>
</view>
</view>
</scroll-view>
2. wxcc code
.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. Pull-down refresh bindrefresherrefresh : onRefreshpull-down refresh event definition
onRefresh() {
// 自己定义刷新事件
var self = this;
// 自己定义刷新事件
self.setData({
triggered: true, // 将triggered属性设置为true，表示下拉刷新已经被触发
})
wx.showToast({
title: "刷新成功"
})
setTimeout(function () {
self.setData({
triggered: false, // 将triggered属性设置为false，表示下拉刷新已完成
})
console.log('下拉刷新已完成');
}, 3000);
}
4. Pull-up loading
Conditions triggered by scroll-view
The bottoming event does not trigger in the following situations:
- The scroll-view does not set the height or the height is set too high.total item height <scroll-view heightCan't reach the bottom when pulling down
- The item in the scroll-view container does not have a height set.total item height<scollview height
注意: If the scroll-view height < the total height of the item and the value is less than 1~4px, it will not trigger. It must be greater than 5px before it will trigger. For example: the scroll-view height
is 480px and the total item height is 480-484px. It will not trigger.
solution：
- scroll-view sets the height to 100vh;
- item sets a suitable height
100vh
It is a unit commonly used in web development and represents a percentage relative to the height of the viewport. Specifically, it is equal to one hundred percent of the height of the viewport. In most cases, this unit is used to set the height or minimum height of an element so that it fills the entire viewport height.
For example, if the viewport height is 600 pixels, then using "100vh" will equal 600 pixels. This way, you can make the element completely fill the entire viewport height by setting its height to "100vh". This is useful when creating full-screen slideshows, background images, or elements that need to completely occupy the viewport.
Pull-down refresh bindrefresherrefresh: onRefresh pull-down refresh event definition
// 下拉刷新
onRefresh() {
var self = this;
this.setData({
triggered: true, // 将triggered属性设置为true，表示下拉刷新已经被触发
})
this.requestFruitList(this.data.flag, 1, function (data) {
// 处理响应数据，并将新的数据覆盖原有数据
this.setData({
fruits: data.fruits,
allPage: data.totalPages,
curPage: 1,
triggered: false, // 将triggered属性设置为false，表示下拉刷新已完成
})
wx.showToast({
title: "刷新成功"
})
}.bind(this), function (err) {
// 处理请求失败情况
console.error(err);
wx.showToast({
title: "刷新失败，请重试"
})
}.bind(this));
}
Source code:
const app = getApp()
Page({
data: {
requestUrl: app.globalData.baseUrl,
types: [{
id: 1,
title: "鲜果现切"
}, {
id: 2,
title: "国产零食"
}, {
id: 3,
title: "特产零食"
},
{
id: 4,
title: "肉类蛋食"
}, {
id: 5,
title: "特色小吃"
}, {
id: 6,
title: "牛奶乳品"
},
{
id: 7,
title: "水果捞吧"
}, {
id: 8,
title: "当即热销"
}, {
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, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
allPage: 1, // 总页数
curPage: 1, // 当前页数
windowHeight: null
},
// 上拉到底部触发
loadMore: function () {
console.log("加载更多");
var self = this;
// 为最后一页
if (self.data.curPage == self.data.allPage) {
wx.showToast({
title: '没有更多了',
})
} 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) {
// 处理响应数据，并将新的数据添加到原有数据之后
var newFruits = self.data.fruits.concat(data.fruits);
self.setData({
fruits: newFruits,
allPage: data.totalPages
});
}, function (err) {
// 处理请求失败情况
console.error(err);
});
}, 300)
}
},
// 下拉刷新
onRefresh() {
var self = this;
this.setData({
triggered: true, // 将triggered属性设置为true，表示下拉刷新已经被触发
})
this.requestFruitList(this.data.flag, 1, function (data) {
// 处理响应数据，并将新的数据覆盖原有数据
this.setData({
fruits: data.fruits,
allPage: data.totalPages,
curPage: 1,
triggered: false, // 将triggered属性设置为false，表示下拉刷新已完成
})
wx.showToast({
title: "刷新成功"
})
}.bind(this), function (err) {
// 处理请求失败情况
console.error(err);
wx.showToast({
title: "刷新失败，请重试"
})
}.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) {
// 处理响应数据
page.setData({
fruits: data.fruits,
allPage: data.totalPages
});
}, function (err) {
// 处理请求失败情况
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);
// 调用成功回调函数，并将响应数据作为参数传递
successCallback(res.data);
},
fail(err) {
console.error(err);
// 调用失败回调函数，并将错误信息作为参数传递
failCallback(err);
}
})
},
onLoad: function (options) {
var id = options.id; // 获取传递的参数
console.log('接收到的id参数为：' + id);
var page = this;
page.setData({
flag: id
})
this.requestFruitList(id, page.data.curPage, function (data) {
// 处理响应数据
page.setData({
fruits: data.fruits,
allPage: data.totalPages
});
}, function (err) {
// 处理请求失败情况
console.error(err);
});
// 获取屏幕高度
wx.getSystemInfo({
success: function (res) {
page.setData({
windowHeight: res.windowHeight
})
console.log('屏幕高度：', res.windowHeight);
}
})
}
})
