一、微信小程序圖片預覽組件使用整理
說明,微信小程序自帶圖片預覽功能;預覽圖片或者視頻,都是新窗口打開,並且阻斷原有頁面的音頻播放等。
wx.previewImage | 在新頁面中全屏預覽圖片 |
wx.previewMedia | 預覽圖片和視頻 |
二、自定義圖片預覽組件,展示圖片處理
原文來自同行封裝:
https://blog.csdn.net/qq_42699996/article/details/106492330
1.previewImg.wxml
<view class="preview_box" wx:if="{{previewHideStatus}}" style="top:{{preview_box_top}}" catchtouchmove='stopPageScroll'>
<view class="totalimg">{{imgindex}}/{{previewImgList.length}}</view>
<view class="preview_box1" style="left:{{left}}" bindtap="jingzhi">
<block wx:for="{{previewImgList}}" wx:key="key">
<view class="img_box">
<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
<movable-area scale-area>
<movable-view direction="all" animation catchscale="onScale" scale scale-min="1" scale-max="5" scale-value="{{scale}}">
<image src="{{item}}" style="width:100%;" mode="widthFix"></image>
</movable-view>
</movable-area>
</view>
</view>
</block>
</view>
</view>
2.previewImg.css
page{
height: 100%;
}
.preview_box{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
white-space: nowrap;
transition: all .3s;
height: 100%;
z-index: 99999;
}
.preview_box>.totalimg{
color: #fff;
position: absolute;
z-index: 999;
top: 10px;
display: flex;
justify-content: center;
width: 100%;
}
.preview_box>.preview_box1{
height: 100%;
position: relative;
}
.img_box{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.img_box>view{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: #fff;
}
movable-area {
height: 100%;
width: 100%;
overflow: hidden;
}
3.previewImg.js
var that;
Component({
/**
* 組件的屬性列表
*/
properties: {
previewImgList: {
type: Array,
value: false
},
previewImg: {
type: null,
value: false
},
},
attached: function () {
that = this;
},
/**
* 組件的初始數據
*/
data: {
preview_box_top: 0,
left: '0px;',
touchS: [0, 0],
touchE: [0, 0],
index: 0,
imgindex:0,
previewHideStatus:false,
scale: 1,
scaleObj:{
scale:1,
x:0,
y:0,
yes:true
},
touchStartTime: 0, // 觸摸開始時間
touchEndTime: 0, // 觸摸結束時間
lastTapTime: 0, // 最後一次單擊事件點擊發生時間
lastTapTimeoutFunc: null, // 單擊事件點擊後要觸發的函數
},
/**
* 組件的方法列表
*/
methods: {
jingzhi(e) {
let diffTouch = this.data.touchEndTime - this.data.touchStartTime;
let curTime = e.timeStamp;
let lastTime = this.data.lastTapDiffTime;
this.data.lastTapDiffTime = curTime;
//兩次點擊間隔小於300ms, 認爲是雙擊
let diff = curTime - lastTime;
if (diff < 300) {
console.log("double tap")
clearTimeout(this.data.lastTapTimeoutFunc); // 成功觸發雙擊事件時,取消單擊事件的執行
if(that.data.scale == 1){
that.setData({
scale:3
})
}else{
that.setData({
scale:1
})
}
} else {
this.data.lastTapTimeoutFunc = setTimeout(function () {
console.log("single tap")
if(that.data.scaleObj.yes){
that.setData({ preview_box_top: '100%' })
}
}, 300);
}
},
configqxClick(e) { this.setData({ scopeWritePhotosAlbum: e.detail }) },
touchStart: function (e) {
this.data.touchStartTime = e.timeStamp //時間點
let sx = e.touches[0].pageX
let sy = e.touches[0].pageY
this.data.touchS = [sx, sy];
},
touchMove: function (e) {
let start = this.data.touchS;
let sx = e.touches[0].pageX;
let sy = e.touches[0].pageY;
this.data.touchE = [sx, sy];
},
touchEnd: function (e) {
this.data.touchEndTime = e.timeStamp //時間點
let start = this.data.touchS
let end = this.data.touchE
let scaleObj = this.data.scaleObj
//如果((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //左滑動
//如果((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //右滑動
if(scaleObj.yes){
if(end[0] == 0){
console.log('點擊')
}else if((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)){
if (this.data.index !== 0) {
this.data.index -= 1;
this.data.imgindex -=1;
this.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
}
}else if((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)){
if (this.data.index !== this.data.previewImgList.length - 1) {
this.data.index += 1;
this.data.imgindex += 1;
this.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
}
}else{
console.log('下滑/上滑');
this.setData({ preview_box_top: '100%' })
}
this.data.touchE = [0, 0];
}
setTimeout(()=>{
if(this.data.scaleObj.x == 0 && this.data.scaleObj.y == 0 && this.data.scaleObj.scale == 1){
console.log('yes is true');
this.data.scaleObj.yes = true;
}
},500)
},
showPreview() {
this.setData({ previewHideStatus: true, preview_box_top: 0 })
},
hidePreview() {
this.setData({ previewHideStatus: false, preview_box_top: 0 })
},
onScale(e) {
this.data.scaleObj = {
scale:e.detail.scale,
x:e.detail.x,
y:e.detail.y,
yes:false
}
},
stopPageScroll() { return },
},
observers: {
'previewImgList': function (arr) {
console.log(arr)
},
'previewImg':function(img){
this.data.previewImgList.map((item,index)=>{
if(item == img){
let imgindex = index;
imgindex+=1;
this.setData({ index: index, imgindex: imgindex, left: '-'+index+'00%;' })
}
})
}
},
})
4.previewImg.json
{
"component": true,
"usingComponents": {}
}
三、自定義組件使用案例
1.json配置
{
"usingComponents": {
"previewImg": "../../../comps/previewImg"
}
}
2.wxml
<image src="{{imgList[0]}}" catchtap="openpreviewImg" mode="widthFix"></image>
<previewImg id="previewComponent" previewImgList="{{imgList}}" previewImg="{{defImg}}" />
3.js
openpreviewImg() {
this.selectComponent("#previewComponent").showPreview();
this.setData({
defImg: this.data.imgList[0]
})
},
展示效果:
更多: