@@ -5,7 +5,25 @@ Page({ | |||
* 页面的初始数据 | |||
*/ | |||
data: { | |||
currentIndex: 0, | |||
swiperList: [ | |||
{ | |||
id: "1", | |||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||
}, | |||
{ | |||
id: "2", | |||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||
}, | |||
{ | |||
id: "3", | |||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||
}, | |||
{ | |||
id: "4", | |||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||
} | |||
] | |||
}, | |||
/** | |||
@@ -22,9 +40,56 @@ Page({ | |||
}, | |||
switchImg(e) { | |||
const currentIndex = e.currentTarget.dataset.index | |||
this.setData({ | |||
currentIndex | |||
}) | |||
}, | |||
previewImage() { | |||
const array = [] | |||
this.data.swiperList.forEach(item => { | |||
array.push(item.src) | |||
}) | |||
wx.previewImage({ | |||
urls: array, | |||
showmenu: true, | |||
}) | |||
}, | |||
swiperChanged(e) { | |||
const currentIndex = e.detail.current | |||
this.setData({ | |||
currentIndex | |||
}) | |||
}, | |||
downloadImage() { | |||
const index = this.data.currentIndex | |||
const list = this.data.swiperList | |||
const filePath = "zhixiangImg.png" | |||
const url = list[index].src | |||
wx.downloadFile({ | |||
url, | |||
success: res => { | |||
console.log(res, 'res'); | |||
if (res.statusCode === 200) { | |||
wx.saveImageToPhotosAlbum({ | |||
filePath: res.tempFilePath, | |||
success: () => { | |||
wx.showToast({ | |||
title: '保存成功!', | |||
icon: "success" | |||
}) | |||
} | |||
}) | |||
} | |||
} | |||
}) | |||
}, | |||
@@ -1,4 +1,57 @@ | |||
/* pages/checkImg/checkImg.wxss */ | |||
page { | |||
background-color: #333333; | |||
padding: 50rpx 0; | |||
.name { | |||
text-align: center; | |||
font-size: 45rpx; | |||
color: #ffffff; | |||
margin-bottom: 40rpx; | |||
} | |||
.imageList { | |||
width: 100%; | |||
height: 800rpx; | |||
text-align: center; | |||
overflow: hidden; | |||
image { | |||
width: 75%; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
.indicator { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 280rpx; | |||
margin-bottom: 100rpx; | |||
.item { | |||
width: 20rpx; | |||
height: 20rpx; | |||
background-color: #ffffff50; | |||
border-radius: 10rpx; | |||
transition: all 0.3s; | |||
&.active { | |||
width: 28rpx; | |||
background-color: #fff; | |||
} | |||
} | |||
} | |||
.downloadImage { | |||
width: 70%; | |||
height: 100rpx; | |||
line-height: 100rpx; | |||
font-weight: 600; | |||
background-color: #ff4f00; | |||
color: #ffffff; | |||
font-size: 32rpx; | |||
text-align: center; | |||
border-radius: 50rpx; | |||
margin: auto; | |||
} | |||
} |
@@ -1,19 +1,17 @@ | |||
<!--pages/checkImg/checkImg.wxml--> | |||
<text>pages/checkImg/checkImg.wxml</text> | |||
<swiper> | |||
<swiper-item> | |||
<image src="../../asset/image/test.png" mode="" /> | |||
<view class="name">模板名称</view> | |||
<swiper class="imageList" current="{{ currentIndex }}" bindchange="swiperChanged"> | |||
<swiper-item wx:for="{{ swiperList }}" wx:key="index"> | |||
<image src="{{ item.src }}" mode="widthFix" bindtap="previewImage" data-src="{{ item.src }}" /> | |||
</swiper-item> | |||
<swiper-item> | |||
<image src="../../asset/image/test.png" mode="" /> | |||
</swiper-item> | |||
<swiper-item> | |||
<image src="../../asset/image/test.png" mode="" /> | |||
</swiper-item> | |||
<swiper-item> | |||
<image src="../../asset/image/test.png" mode="" /> | |||
</swiper-item> | |||
<swiper-item> | |||
<image src="../../asset/image/test.png" mode="" /> | |||
</swiper-item> | |||
</swiper> | |||
</swiper> | |||
<view class="indicator"> | |||
<view class="{{ currentIndex == 0 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="0"></view> | |||
<view class="{{ currentIndex == 1 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="1"></view> | |||
<view class="{{ currentIndex == 2 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="2"></view> | |||
<view class="{{ currentIndex == 3 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="3"></view> | |||
</view> | |||
<button class="downloadImage" bindtap="downloadImage">保存到手机</button> |
@@ -1,6 +1,6 @@ | |||
{ | |||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", | |||
"projectname": "Metavatr_DCIM_Wapp", | |||
"projectname": "Metavatar_DCIM_Wapp", | |||
"setting": { | |||
"compileHotReLoad": true, | |||
"urlCheck": true | |||