ddw
ddw
  • 发布:2022-12-31 13:12
  • 更新:2022-12-31 16:28
  • 阅读:264

学习贴 轮播图无法显示

分类: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 负责人:无 分享
已邀请:
s***@163.com

s***@163.com

你设置宽高了吗

  • ddw (作者)

    设置了

    2022-12-31 14:44

DCloud_UNI_WZF

DCloud_UNI_WZF

  • ddw (作者)

    这样也是不显示图片

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

    2022-12-31 14:45

ddw

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

ddw (作者)

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

  • 法王愫

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

    2022-12-31 18:58

  • ddw (作者)

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

    2023-01-01 01:42

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容