집 >위챗 애플릿 >미니 프로그램 개발 >미니 프로그램 예: 풀다운 새로 고침을 사용자 정의하는 방법
이 기사의 내용은 미니 프로그램 예제: 풀다운 새로 고침을 사용자 정의하는 방법입니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.
사용자 정의 구성 요소:
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: '松开加载', scrollHeight: dY }) } else if (dY > 80) { this.setData({ tips: '松开加载', scrollHeight: 80 }) } else { this.setData({ tips: '下拉刷新', 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='loading-container' bindtouchend='end' bindtouchmove='move' bindtouchstart='start' style='margin-top:{{scrollHeight}}px;transform:translateY(-50px);' > <view class="weui-loadmore" style='margin:0 auto;padding:1.5em 0;'> <view class="weui-loading"></view> <view class="weui-loadmore__tips">{{tips}}</view> </view> </view>
wxss: weui를 참조하며 매우 간단하며 사용 여부는 중요하지 않습니다.
@import '/pages/common/weui.wxss'; page{ height: 100%; } .loading-container{ height: 100%; }
wxml 페이지:
<loadmore style='height:100%;' bindonRefresh='onRefresh' id='loadmore'></loadmore>
js: //새로고침 메소드 콜백
onRefresh: function() { var that = this; setTimeout(function(){ that.selectComponent("#loadmore").stopRefresh(); },3000) }, json: { "enablePullDownRefresh": false, "usingComponents":{ "loadmore":"../../components/test/test" } }
위 내용은 미니 프로그램 예: 풀다운 새로 고침을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!