序文
最近、WeChat ミニ プログラム プロジェクトに取り組んでいたとき、機能の 1 つは、ページングと電流制限を備えた製品リストを作成し、プルアップのロードとプルダウンのリフレッシュ機能を実装することでした。スクロールビューコンポーネントを使った -down 更新イベントが一度も発生しませんでした。インターネット上では、scroll -View は高さなどを設定すれば解決すると言う人が多かったです。高さを設定しても発生しない人もいるので、このスクロールビューのトリガーメカニズムを研究してください。
1. スクロールビュー
スクロール可能なビュー領域。垂直スクロールを使用する場合、スクロールビューに固定の高さを与え、WXSS を通じて高さを設定する必要があります。コンポーネント属性の長さの単位はデフォルトで px になり、入力単位 (rpx/px) は 2.4.0 以降でサポートされます。
2 つの属性は、プルアップの読み込み、プルダウンの更新トリガー イベントの
スクロールビュー属性として機能しますbindrefresherrefresh。カスタム プルダウンの更新がトリガーされます。
スクロールビュー属性bindscrolltolower: 下/右にスクロールするとトリガーされます
公式 Web サイトのドキュメント: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
2. プルアップしてロードし、プルダウンしてリフレッシュします
ヒント: 以下はこの記事の本文です。以下のケースは参考です。
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);">库存{
{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属性设置为true，表示下拉刷新已经被触发
})
wx.showToast({
title: "刷新成功"
})
setTimeout(function () {
self.setData({
triggered: false, // 将triggered属性设置为false，表示下拉刷新已完成
})
console.log('下拉刷新已完成');
}, 3000);
}
4. プルアップロード
スクロールビューによってトリガーされる条件
次の状況ではボトミング イベントはトリガーされません。
- スクロールビューの高さが設定されていないか、高さが高すぎます。アイテムの合計高さ < スクロールビューの高さ引き下げても底まで届かない
- スクロールビューコンテナ内の項目には高さが設定されていません。アイテムの合計高さ<スコルビューの高さ
注意: スクロール ビューの高さ < 項目の合計の高さで、値が 1 ～ 4 ピクセル未満の場合、トリガーされません。トリガーするには、5 ピクセルより大きくなければなりません。例: スクロール ビューの高さは 480 ピクセル
ですアイテムの高さの合計が 480 ～ 484 ピクセルの場合はトリガーされません。
解決：
- スクロールビューは高さを 100vh に設定します。
- アイテムは適切な高さを設定します
100vh
これは Web 開発で一般的に使用される単位であり、ビューポートの高さに対する相対的なパーセンテージを表します。具体的には、ビューポートの高さの 100% に相当します。ほとんどの場合、この単位は、ビューポートの高さ全体を満たすように要素の高さまたは最小高さを設定するために使用されます。
たとえば、ビューポートの高さが 600 ピクセルの場合、「100vh」を使用すると 600 ピクセルになります。このように、要素の高さを「100vh」に設定することで、要素がビューポートの高さ全体を完全に埋めることができます。これは、全画面スライドショー、背景画像、またはビューポートを完全に占有する必要がある要素を作成する場合に便利です。
プルダウン リフレッシュ bindingrefresherrefresh: onRefresh プルダウン リフレッシュ イベント定義
// 下拉刷新
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));
}
ソースコード：
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);
}
})
}
})
