学习贴轮播图无法显示

分类：uni-app

数据交互

uniapp学习帖子

我这样写轮播图为什么不显示接口数据可以打印出来

<template>  
    <view class="content">  

        <swiper>  
            <swiper-item>  

                <image v-for="(item,index) in swiper_list" :key="index" :src="item"></image>  
            </swiper-item>  

        </swiper>  

    </view>  
</template>  
<script>  
import swiper from '../../uni_modules/uview-ui/libs/config/props/swiper';  
    export default {  
        data() {  
            return {  
            swiper_list: [],  
            }  
        },  
        onLoad() {  
            uni.request({  
                url:'http://lifo.jianyicms.com/index.php?v=1&appid=1&appsecret=PHPCMF06FCF83CF16C2&s=httpapi&m=site',  
                method:'GET',  
                success:(res)=>{  
                        console.log(res);  

                    this.swiper_list = data.data.hdtp  
                    console.log(this.swiper_list);  

                }  

            })  

        },  
        methods: {  

        }  
    }  
</script>

2022-12-31 13:12 负责人:无分享

5 个回复

s***@163.com

你设置宽高了吗

ddw (作者)

设置了

2022-12-31 14:44

DCloud_UNI_WZF

swiper-item 才是轮播的每一个item，把v-for 放到它上面
参考下文档的示例 https://uniapp.dcloud.net.cn/component/swiper.html

ddw (作者)

这样也是不显示图片

就好像数据没有赋值到swiper_list一样

2022-12-31 14:45

ddw (作者)

(2) [{…}, {…}, __ob__: Observer]  
0:  
1: "http://lifo.jianyicms.com/uploadfile/202212/d3da61f7db30.png"  
2: "交易查"  
3: ""  
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}  
get 1: ƒ reactiveGetter()  
set 1: ƒ reactiveSetter(newVal)  
get 2: ƒ reactiveGetter()  
set 2: ƒ reactiveSetter(newVal)  
get 3: ƒ reactiveGetter()  
set 3: ƒ reactiveSetter(newVal)  
__proto__: Object  
1:  
1: "http://lifo.jianyicms.com/uploadfile/202212/d0169e3ddd3ca8e.png"  
2: "简一CMS"  
3: ""  
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}  
get 1: ƒ reactiveGetter()  
set 1: ƒ reactiveSetter(newVal)  
get 2: ƒ reactiveGetter()  
set 2: ƒ reactiveSetter(newVal)  
get 3: ƒ reactiveGetter()  
set 3: ƒ reactiveSetter(newVal)  
__proto__: Object  
length: 2

法王愫

<template>    
    <view class="content">    

        <swiper>    
            <swiper-item v-for="(item,index) in swiper_list" :key="index">    
                <image  :src="item"></image>    
            </swiper-item>    

        </swiper>    

    </view>    
</template>

如果这样写没效果，你就先去掉<image :src="item"></image> 这行改成{{item}},看看这个item的数据结构是啥

ddw (作者)

改为{{item}}也是显示数组

法王愫

你的字段名称改一下吧，比如1改成url，到时候：：src="item.url" 就可以了

2022-12-31 18:58
ddw (作者)

回复法王愫: 感谢大佬耐心解答

2023-01-01 01:42

要回复问题请先登录或注册

学习贴轮播图无法显示

5 个回复

公告

相关问题

学习贴 轮播图无法显示

与内容相关的链接

5 个回复

公告

相关问题

学习贴轮播图无法显示