Browse Source

添加下一页,preview模式添加lazy-load

master
Naomi 8 months ago
parent
commit
ca64752592
3 changed files with 53 additions and 4 deletions
  1. BIN
      images/next.gif
  2. +39
    -3
      pages/album/album.js
  3. +14
    -1
      pages/album/album.wxml

BIN
images/next.gif View File

Before After
Width: 560  |  Height: 420  |  Size: 464 KiB

+ 39
- 3
pages/album/album.js View File

@ -21,6 +21,8 @@ Page({
//深度遍历
deeper: false,
marker: 0,
// 图片布局列表(二维数组,由`albumList`计算而得)
layoutList: [],
@ -137,7 +139,7 @@ Page({
},
// 获取相册列表
getAlbumList(callback) {
getAlbumList(callback, marker = "") {
let that = this;
this.showLoading('加载列表中…');
setTimeout(() => this.hideLoading(), 300);
@ -150,11 +152,21 @@ Page({
Bucket: config.Bucket,
Region: config.Region,
Prefix: prefix,
Marker: marker,
Delimiter: delimiter,
MaxKeys: 200,
}, function (err, data) {
if (data) {
console.log(data)
if (data.IsTruncated == "true") {
that.data.marker = data.NextMarker
that.setData({
marker: data.NextMarker
})
} else {
that.setData({
marker: 0
})
}
var list = (data && data.Contents || [])
.map(item => 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + util.camSafeUrlEncode(item.Key).replace(/%2F/g, '/')).filter(item => /\.(jpg|png|gif|jpeg|pjp|pjpeg|jfif|xbm|tif|svgz|webp|ico|bmp|svg)$/.test(item) && /^(?!.*CDN).*$/.test(item));
callback(list);
@ -174,7 +186,7 @@ Page({
});
layoutList = listToMatrix(imageList, layoutColumnSize);
this.setData({
layoutList
layoutList,
});
},
@ -322,6 +334,7 @@ Page({
});
}
},
copyLink() {
let tmp = decodeURIComponent(this.data.imageInAction);
tmp = tmp.substring(tmp.lastIndexOf('/') + 1, tmp.length);
@ -346,6 +359,7 @@ Page({
},
});
},
bindPickerChange: function (e) {
console.log('picker发送选择改变,当前文件夹为', this.data.folder[e.detail.value])
this.setData({
@ -367,6 +381,7 @@ Page({
self.renderAlbumList();
});
},
checkboxChange: function (e) {
console.log('checkbox发送选择改变,当前深度遍历为', e.detail.value != '' ? '开启' : '关闭')
this.data.deeper = e.detail.value != 'deepFold' ? false : true;
@ -389,4 +404,25 @@ Page({
self.renderAlbumList();
});
},
nextPage() {
console.log(this.data.marker)
this.setData({
layoutList: [],
albumList: [],
})
var self = this;
this.renderAlbumList();
this.getAlbumList(function (list) {
list = self.data.albumList.concat(list || {});
if (!list.length) {
list = [];
}
list = list.reverse();
self.setData({
'albumList': list
});
self.renderAlbumList();
}, self.data.marker);
},
});

+ 14
- 1
pages/album/album.wxml View File

@ -12,6 +12,7 @@
<view class="album-container">
<view class="item-group" wx:for="{{layoutList}}" wx:for-item="group" wx:for-index="rowIndex" wx:key="group">
<block wx:for="{{group}}" wx:for-item="item" wx:for-index="cellIndex" wx:key="item">
<block wx:if="{{item.type==='add'}}">
<view class="upload-add-outer">
<view class="upload-add" bindtap="chooseImage">
@ -20,12 +21,24 @@
</view>
</view>
</block>
<block wx:elif="{{item}}">
<image lazy-load="true" bindtap="enterPreviewMode" bindlongpress="showActions" data-src="{{item}}" class="album-item" src="{{item+'!preview'}}" mode="aspectFill"></image>
</block>
<block wx:elif="{{item===0 && group[cellIndex-1] && marker!=0}}">
<view class="upload-add-outer">
<view class="upload-add" bindtap="nextPage">
<image src="/images/next.gif" mode="aspectFit"></image>
<text>下一页</text>
</view>
</view>
</block>
<block wx:else>
<view class="album-item empty"></view>
</block>
</block>
</view>
</view>
@ -34,7 +47,7 @@
<swiper class="swiper-container" duration="{{slideDuration}}" current="{{previewIndex}}" bindtap="leavePreviewMode" style="display: {{previewMode ? 'block' : 'none'}};">
<block wx:for="{{albumList}}" wx:for-item="item" wx:key="item">
<swiper-item>
<image lazy-load="true" src="{{item + '!weixin'}}" mode="aspectFit"></image>
<image wx:if="{{previewMode}}" lazy-load="true" src="{{item + '!weixin'}}" mode="aspectFit"></image>
</swiper-item>
</block>
</swiper>


Loading…
Cancel
Save