UniApp配合Ai快速开发二次元动漫幻灯片小程序,接口适配,一键保存,新手可用(内附教程)

<template>  <!-- 全屏容器 -->  <viewclass="slide-container">    <!-- 轮播组件：满屏、自动播放、无边距 -->    <swiper      class="swiper"       indicator-dots       autoplay       interval="3000"       duration="500"      circular      indicator-color="rgba(255,255,255,0.4)"      indicator-active-color="#ff5e87"    >      <swiper-itemv-for="(item, index) in imgList":key="index">        <!-- 满屏图片 -->        <image          :src="item.url"           class="slide-img"          mode="aspectFill"          @error="loadError(index)"        ></image>      </swiper-item>    </swiper>    <!-- 底部固定功能按钮栏 -->    <viewclass="bottom-bar">      <button @click="changeSlide"class="bar-btn">切换动画</button>      <button @click="refreshData"class="bar-btn refresh-btn">刷新图片</button>      <button @click="downloadImage"class="bar-btn download-btn">保存图片</button>    </view>  </view></template><script>export default {  data() {    return {      // 图片列表      imgList: [],      // 轮播自动播放状态      isAutoPlay: true,      // 当前轮播索引      currentIndex: 0    };  },  onLoad() {    // 页面加载获取图片数据    this.getAnimeImages();  },  methods: {    // 请求接口获取动漫图片    async getAnimeImages() {      uni.showLoading({ title: '加载中...' });      try {        // 替换为你的真实接口：demo.com        const res = await uni.request({          url: 'https://demo.com',          method: 'GET'        });        // 接口返回数据处理        if (res.data && res.data.results) {          this.imgList = res.data.results;        }      } catch (error) {        uni.showToast({ title: '加载失败', icon: 'error' });        // 演示用：接口不可用时使用示例数据        this.imgList = [          {"artist_name":"もいち","artist_href":"https://www.pixiv.net/en/users/64870797","source_url":"https://www.pixiv.net/en/artworks/124596373","url":"https://nekos.best/api/v2/neko/889e0c35-7c8f-4d82-98f0-f9756132521c.png"},          {"artist_name":"しろみ","artist_href":"https://www.pixiv.net/en/users/56415026","source_url":"https://www.pixiv.net/en/artworks/85527936","url":"https://nekos.best/api/v2/neko/4dd46ae9-c4af-462d-9afe-ccdbf4b06395.png"}        ];      } finally {        uni.hideLoading();      }    },    // 切换轮播动画（开启/关闭自动播放）    changeSlide() {      this.isAutoPlay = !this.isAutoPlay;      uni.showToast({        title: this.isAutoPlay ? '已开启自动播放' : '已关闭自动播放',        icon: 'success'      });    },    // 刷新图片列表    refreshData() {      this.getAnimeImages();      uni.showToast({ title: '刷新成功', icon: 'success' });    },    // 保存当前图片到手机    async downloadImage() {      if (this.imgList.length === 0) return;      const currentImg = this.imgList[this.currentIndex].url;      uni.showLoading({ title: '保存中...' });      try {        // 下载文件到临时路径        const downloadRes = await uni.downloadFile({ url: currentImg });        // 保存到相册        await uni.saveImageToPhotosAlbum({          filePath: downloadRes.tempFilePath        });        uni.showToast({ title: '保存成功！', icon: 'success' });      } catch (error) {        uni.showToast({ title: '保存失败', icon: 'error' });      } finally {        uni.hideLoading();      }    },    // 轮播切换时更新当前索引    swiperChange(e) {      this.currentIndex = e.detail.current;    },    // 图片加载失败处理    loadError(index) {      console.log('图片加载失败：', this.imgList[index].url);    }  }};</script><stylescoped>/* 全屏容器 */.slide-container {  width: 100vw;  height: 100vh;  background-color: #12121c;  position: relative;  overflow: hidden;}/* 轮播满屏 */.swiper {  width: 100%;  height: 100%;}/* 图片满屏填充 */.slide-img {  width: 100%;  height: 100%;  display: block;}/* 底部固定按钮栏 */.bottom-bar {  position: fixed;  bottom: 0;  left: 0;  width: 100%;  height: 60px;  background: rgba(0, 0, 0, 0.7);  backdrop-filter: blur(10px);  display: flex;  justify-content: space-around;  align-items: center;  padding: 0 10rpx;  box-sizing: border-box;  z-index: 999;}/* 按钮样式 */.bar-btn {  flex: 1;  height: 36px;  line-height: 36px;  font-size: 14px;  border-radius: 18px;  margin: 0 6px;  color: #fff;  border: none;  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);}/* 刷新按钮颜色 */.refresh-btn {  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);}/* 下载按钮颜色 */.download-btn {  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);}</style>

{  "pages": [    {      "path": "pages/index/index",      "style": {        "navigationBarTitleText": "二次元动漫幻灯片",        "navigationBarBackgroundColor": "#12121c",        "navigationBarTextStyle": "white",        "backgroundColor": "#12121c"      }    }  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#12121c",    "navigationBarTitleText": "动漫壁纸",    "navigationBarTextStyle": "white"  },  "sitemapLocation": "sitemap.json"}