ミニプログラムの例: プルダウンの更新をカスタマイズする方法

不言
リリース: 2018-09-18 16:16:35
オリジナル
5408 人が閲覧しました

この記事の内容は、プルダウンの更新をカスタマイズする方法に関する小さなプログラムの例です。必要な方は参考にしていただければ幸いです。

カスタムコンポーネント:

js:

// components/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
 
},
 
/**
* 组件的初始数据
*/
data: {
scrollHeight: 0,
startY: 0,
tips: '下拉刷新',
isRefreshing: false
},
 
/**
* 组件的方法列表
*/
methods: {
end: function(e) {
if (this.data.isRefreshing) {
return
}
if (this.data.scrollHeight >= 50) {
this.setData({
scrollHeight: 50,
tips: '正在刷新',
isRefreshing: true
})
this.triggerEvent('onRefresh')
} else {
this.setData({
scrollHeight: 0,
tips: '下拉刷新'
})
}
},
move: function(e) {
if (this.data.isRefreshing) {
return
}
 
var that = this;
var moveY = e.touches[0].pageY;
var dY = moveY - that.data.startY;
console.log(dY);
if (dY >= 50 && dY <= 80) {
this.setData({
tips: &#39;松开加载&#39;,
scrollHeight: dY
})
} else if (dY > 80) {
this.setData({
tips: &#39;松开加载&#39;,
scrollHeight: 80
})
} else {
this.setData({
tips: &#39;下拉刷新&#39;,
scrollHeight: dY
})
}
 
},
 
start: function(e) {
this.data.startY = e.touches[0].pageY;
},
 
stopRefresh: function() {
this.setData({
isRefreshing: false,
scrollHeight: -50
})
},
}
})
ログイン後にコピー

wxml:

<!--components/test/test.wxml-->
<view class=&#39;loading-container&#39; bindtouchend=&#39;end&#39; bindtouchmove=&#39;move&#39; bindtouchstart=&#39;start&#39; style=&#39;margin-top:{{scrollHeight}}px;transform:translateY(-50px);&#39; >
<view class="weui-loadmore" style=&#39;margin:0 auto;padding:1.5em 0;&#39;>
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">{{tips}}</view>
</view>
</view>
ログイン後にコピー

wxss: これは非常にシンプルな weui を参照しており、使用するかどうか

@import &#39;/pages/common/weui.wxss&#39;;
page{
height: 100%;
}
 
.loading-container{
height: 100%;
}
ログイン後にコピー

wxml (ページ内):

<loadmore style=&#39;height:100%;&#39; bindonRefresh=&#39;onRefresh&#39; id=&#39;loadmore&#39;></loadmore>
ログイン後にコピー

js://refresh メソッド コールバック

onRefresh: function() {
var that = this;
setTimeout(function(){
that.selectComponent("#loadmore").stopRefresh();
},3000)
},
json:
{
"enablePullDownRefresh": false,
"usingComponents":{
"loadmore":"../../components/test/test"
}
}
ログイン後にコピー

以上がミニプログラムの例: プルダウンの更新をカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート