ウィジェットscroll-viewスクロールリフレッシュデータ増加swiper切替
5481 ワード
scroll-view前編をご覧ください
シーン:
データ量が多い場合は、まずデータの一部をロードし、スクロール更新データを監視する必要があります.
解決:
この場合、scroll-viewが提供するインタフェースを使用してスクロール状況を監視できます.
WeChatの公式ドキュメントには、lower-thresholdとbindscrolltoolowerが提供されており、処理が右/下に滑った場合を監視しています.
コードは次のとおりです.
view
js
シーン:
データ量が多い場合は、まずデータの一部をロードし、スクロール更新データを監視する必要があります.
解決:
この場合、scroll-viewが提供するインタフェースを使用してスクロール状況を監視できます.
WeChatの公式ドキュメントには、lower-thresholdとbindscrolltoolowerが提供されており、処理が右/下に滑った場合を監視しています.
コードは次のとおりです.
view
{{item}}
{{item.user_name}}
{{item.user_points}}
js
Page({
data: {
th: [" ", ' '],
hasMore: true,
data: []
},
onLoad: function() {
this.getData()
},
getData: function() {
// api
wx.hideLoading()
},
scrollBottom: function() {
var that = this
if (that.data.hasMore) {
wx.showLoading({
title: ' ',
icon: 'loading'
})
that.getData()
}
}
})
在view页面中
的lower-threshold值默认为50 这时候需要把他修改的越小越好,最好为1或者0,不然会出现滑动多次触发函数的情况。
more
既然都做到这样了,不如再加上个滑动切换吧
这时候吧swiper组件也加上好了
view
{{item}} {{item.time}} {{item.phone}} {{item.time}} {{item.phone}}
jsPage({ data: { tabData: [' ', ' '], activeIndex: 0, data01: [], data02: [], hasMore: true
onLoad:function(){this.getData()this.getTop('#scrollView')},getData:function(){//必要に応じてapiと対話してデータを得るwx.hideLoading()} getTop: function(id) { var that = this wx.createSelectorQuery().select(id).boundingClientRect(function(rect) { console.log(rect) that.setData({ style: 'position: absolute;bottom: 0;width: 100%;top:' + rect.top + 'px' }) }).exec()},scrollBottom:function(){var that=this if(that.data.hasMore){wx.showLoading({title:'より多くのデータロード中',icon:'loading'})that.getData() } }, tabChange(e) { console.log(e.currentTarget.id) let $index = parseInt(e.currentTarget.id) this.setData({ activeIndex: $index }) }, swiperChange(e) { console.log(e.detail.current) this.setData({ activeIndex: e.detail.current }) }})},