uniapp（相关搜索：轮播图|图片渲染）

Question

uniapp遍历轮播图数据时，图片渲染不出来。
报错显示：
1.main.js:25 [Vue warn]: Unhandled error during execution of watcher getter
2.main.js:25 TypeError: toRoute.split is not a function

export default [  
    {  
        id:1,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/pic1.jpg',  
            '/static/image/pic2.jpg',  
            '/static/image/pic3.jpg',         
            '/static/image/food4.png',  
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:6.0  
    },  
    {  
        id:2,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/pic1.jpg',  
            '/static/image/pic2.jpg',  
            '/static/image/pic3.jpg',         
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:4.0  
    },  
    {  
        id:3,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/pic1.jpg',  
            '/static/image/pic2.jpg',         
            '/static/image/food4.png',  
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:3.0  
    },  
    {  
        id:4,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:2.0  
    },  
    {  
        id:5,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/pic1.jpg',  
            '/static/image/pic2.jpg',  
            '/static/image/pic3.jpg',                 
            '/static/image/food4.png',  
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:4.3  
    },  
    {  
        id:6,  
        image:'/static/image/诈骗2.png',   
        swiperimages:[  
            '/static/image/pic1.jpg',  
            '/static/image/pic2.jpg',  
            '/static/image/pic3.jpg',         
            '/static/image/food4.png',  
            '/static/image/mac.jpg',  
        ],  
        sName:'麦当劳',   
        sDistence:'441.3km',   
        sAddress:'广东省肇庆市端州区敏捷广场',  
        text1:'免费券',   
        text2:'停车位',   
        text3:'WIFI',   
        text4:'支付宝',  
        text5:'微信',  
        point:4.0  
    },  
]

<template>  
  <view style="background-color: #f1f1f1;height: 1500rpx">  
    <scroll-view scroll-y="true">  
      <view class="index">  
        <!-- Swiper 动态渲染 -->  
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">  
          <swiper-item v-for="item in items" :key="item.id">  
            <view class="swiper-item">  
              <image :src="item.swiperimages" mode="aspectFill" class="titleImg"></image>  
            </view>  
          </swiper-item>  
        </swiper>  

        <!-- 广告图片 -->  
        <image src="/static/image/诈骗2.png" mode="aspectFill" class="gg titleImg"></image>  

        <view class="shopDetails">  
          <view class="container">  
            <!-- 商店图像 -->  
            <image class="DetImg" :src="shopData.image" mode="aspectFill"></image>  
            <view class="detailsContent">  
              <view class="first">  
                <text class="shopName">{{ shopData.sName }}</text>  
                <image class="icon" src="/static/icons/401weizhi.png" mode="aspectFill"></image>  
                <image class="icon" src="/static/icons/kefu401.png" mode="aspectFill"></image>  
              </view>  
              <view class="second">  
                <text class="point">{{ shopData.point }}</text>  
                <text class="distance">{{ shopData.sDistence }}</text>  
              </view>  
            </view>  
          </view>  

          <!-- 第三部分 -->  
          <view class="third">  
            <text>简介</text>  
          </view>  
        </view>  
      </view>  
    </scroll-view>  
  </view>  
</template>  

<script setup>  
import { ref, onMounted } from 'vue';  
import { useRoute } from 'vue-router';  
import neishopList from '/storage/neishopList.js';  

const route = useRoute();  
const items = ref(neishopList);  
const shopData = ref({});  

onMounted(() => {  
  const id = parseInt(route.query.id);  
  shopData.value = neishopList.find(item => item.id === id);  
  console.log(shopData.value); // 确认数据  
});  
</script>  

<style scoped lang="scss">  
.titleImg {  
  width: 100%;  
}  
.swiper {  
  height: 500rpx; /* 确保轮播图高度足够 */  
}  
.gg {  
  height: 360rpx;  
  padding-bottom: 10rpx;  
}  
.shopDetails {  
  display: flex;  
  flex-direction: column;  
  width: 715rpx;  
  height: 220rpx;  
  background-color: #fff;  
  margin: auto;  
  position: relative;  
}  
.DetImg {  
  width: 120rpx;  
  height: 120rpx;  
  border-radius: 50%;  
}  
.icon {  
  width: 40rpx;  
  height: 40rpx;  
}  
.container {  
  padding: 10rpx 0 10rpx 10rpx;  
  display: flex;  
  align-items: center; /* Vertically center items */  
}  
.first {  
  padding-left: 25rpx;  
}  
.first, .second {  
  gap: 50rpx;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: center;  
}  
.detailsContent {  
  display: flex;  
  flex-direction: column; /* Stack .first and .second vertically */  
  margin-left: 10rpx; /* Space between .DetImg and .detailsContent */  
}  
.third {  
  color: #90979a;  
  position: absolute;  
  bottom: 15rpx;  
}  
.point {  
  color: #f5c932;  
  font-size: 80%;  
}  
.distance {  
  color: #696969;  
}  
</style>  

import App from './App'  
import uviewPlus from '@/uni_modules/uview-plus'  
// #ifndef VUE3  

app.use(uviewPlus)  
import Vue from 'vue'  
import './uni.promisify.adaptor'  
Vue.config.productionTip = false  
App.mpType = 'app'  
const app = new Vue({  
  ...App  
})  
app.$mount()  
// #endif  

// #ifdef VUE3  
import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  app.use(uviewPlus)  
  return {  
    app  
  }  
}  
// #endif

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在解决您的问题之前，我们需要先确定错误的具体原因。您提供的代码片段似乎没有包含任何异常处理机制，这可能导致一些错误被忽略。您可以尝试添加适当的错误处理逻辑以提高程序健壮性。

首先，我们可以通过console.error()打印出具体的错误信息来定位问题所在。然后，根据错误信息进一步分析并修复问题。

以下是针对上述情况的一些可能解决方案：

1. 检查是否缺少ref声明： 如果您未正确声明items和shopData变量为ref类型，那么它们将不会自动绑定到组件实例上。这可能导致无法获取到对应的值。确保每个变量都正确地声明为ref。

2. 验证数据结构： 检查数据中的元素是否符合预期格式，并且所有元素都是有效的对象。例如，确保每张图片都有正确的路径。

3. 错误处理： 在循环中加入一个try-catch语句，用于捕获可能出现的错误，并提供有意义的错误消息。这样可以更清晰地识别问题来源。

4. 优化性能： 考虑减少不必要的DOM操作，比如不频繁地改变滚动条的位置，而是通过CSS实现布局效果。

5. 使用调试工具： 使用浏览器的开发者工具（如Chrome DevTools）进行深入的代码调试，以便更好地理解代码行为和错误发生的原因。

基于以上建议，您可以逐步修改代码，逐步排查问题所在。如果您能提供更多关于具体错误的信息，例如错误堆栈、日志输出等，可能会更容易找到问题的根本原因。希望这些提示对您有所帮助！