小程式 scroll-view 滾動重新整理資料 增加swiper切換
阿新 • • 發佈:2019-01-28
場景:
在資料量很多的情況下,我們需要首先載入一部分資料,之後監測滾動更新資料
解決:
這時候可以使用 scroll-view 提供的介面來監控滾動情況
微信官方文件<scroll-view>裡面提供了lower-threshold與bindscrolltolower來監控處理滑到到右邊/底部的情況
程式碼如下
view
<view class="table"> <view class="tr"> <view class="th" wx:for="{{th}}">{{item}}</view> </view> <view class="scrollView"> <scroll-view scroll-y lower-threshold='1' bindscrolltolower="scrollBottom"> <view class="tr" wx:for="{{data}}"> <view class="td">{{item.user_name}}</view> <view class="td">{{item.user_points}}</view> </view> <view class="tr {{hasMore ? 'hasMore' : ' '}}"> <view class="td">沒有更多資料了</view> </view> </scroll-view> </view> </view>
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頁面中
<scroll-view>的lower-threshold值預設為50
這時候需要把他修改的越小越好,最好為1或者0,不然會出現滑動多次觸發函式的情況。
more
既然都做到這樣了,不如再加上個滑動切換吧
這時候吧swiper元件也加上好了
view
<view class="tabBar"> <view id="{{index}}" class="tabBtn" wx:for="{{tabData}}" bindtap="tabChange">{{item}}</view> <view class="active" style="left:{{activeIndex*50}}%"></view> </view> <swiper current="{{activeIndex}}" bindchange="swiperChange"> <swiper-item> <view class="tablebox"> <view class="tr"> <view class="th">時間</view> <view class="th">賬號</view> </view> <view class="scrollView" id="scrollView" style="{{style}}"> <scroll-view scroll-y> <view class="tr" wx:for="{{data01}}"> <view class="td">{{item.time}}</view> <view class="td">{{item.phone}}</view> </view> </scroll-view> </view> </view> </swiper-item> <swiper-item> <view class="tablebox"> <view class="tr"> <view class="th">時間</view> <view class="th">賬號</view> </view> <view class="scrollView" style="{{style}}"> <scroll-view scroll-y> <view class="tr" wx:for="{{data02}}"> <view class="td">{{item.time}}</view> <view class="td">{{item.phone}}</view> </view> </scroll-view> </view> </view> </swiper-item> </swiper>
js
Page({
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 }) }})