uniapp首页轮播图

分类：uni-app

首页 App打包 uniapp

我使用的是u-swiper 首页轮播图在浏览器里面运行时候是可以显示的但是打包成app了第一次启动是无法渲染出来轮播图的要退出登录重新进才加载的出来代码写的也比较简单我就是在onloade里面调用了接口然后在渲染进去

我还试图修改生命周期把接口放到onshow 和 created 里面还是一样情况 onshow在浏览器直接无法加载显示

<u-swiper :list="bannerlist" :height="372"></u-swiper>

onLoad() {  
            this.getbanner()  
        },


getbanner() {  
                this.$u.post('/news_newslist.html', {  
                    catid: 46  
                }).then(res => {  
                    res.data.return.map((item) => {  
                        this.bannerlist.push({  
                            image: item.thumb  
                        })  
                    })  
                    console.log('banner图', this.bannerlist);  
                });  
            },

2021-05-24 11:14 负责人:无分享

4 个回复

秋凡 - 全职接单高效率、高质量 uniapp项目开发服务器部署-运维欢迎咨询 Q：377313813 vx:ran1ever

swiper官方的不能满足么？为何还要用第三方的

2***@qq.com (作者)

因为我框架用的uview 在使用的时候就使用了他封装的u-swiper组件

2021-05-25 09:20
2***@qq.com (作者)

我使用官方的还是不行

<swiper class="banner" easing-function="linear" circular indicator-dots indicator-color="#fff">

<swiper-item class="swiperitem" v-for="(item,index10) in bannerlist" :key="index10">

<image class="itemImg" :src="item.image"></image>

</swiper-item>

</swiper>

2021-05-25 09:22

2***@qq.com (作者)

我在onShow里面在添加了一次 this.getbanner() 但是这样会导致每一次都发起请求的时候执行map然后在在原来的基础上再一次添加获取的图运行时没有问题的我想是不是我这个map哪里赋值出了什么问题删除了map 直接获取所有的数据然后点出来直接赋值

我的代码就变成了这样目前是可以测试成功的我不是很明白原理 map这里出现了问题为什么会导致这种情况的发生，是异步了？？

onShow() {  
            this.getbanner()  
        },  
onLoad() {    
            this.getbanner()    
        },

html结构

<swiper class="banner" default-source easing-function="linear" circular indicator-dots  
                    indicator-color="#fff">  
                    <swiper-item class="swiperitem" v-for="(item,index10) in bannerlist" :key="index10">  
                        <image class="itemImg" :src="item.thumb"></image>  
                    </swiper-item>  
                </swiper>

请求

getbanner() {  
                this.$u.post('/news_newslist.html', {  
                    catid: 46  
                    // catid: this.ciad  
                }).then(res => {  
                    // forEach map  
                    console.log(res.data.return);  
                    this.bannerlist = res.data.return  
                    // res.data.return.map((item) => {  
                    //  this.bannerlist.push({  
                    //      image: item.thumb  
                    //  })  
                    //  console.log('图', this.bannerlist);  
                    // })  
                    console.log('banner图');  
                });  
            },

9***@qq.com - 非要验证吗

不明白，为什么，你使用的是post请求，我感觉直接get请求不就行了？

2***@qq.com (作者)

因为后端说了请求是post 我问过他

2021-05-25 11:25
9***@qq.com

回复 2***@qq.com: 哦，能获取到数据就好，按道理，这个轮播图，是个小坑，很容易排查。你看看，是不是和nvue相关的错误，因为uview暂时，不支持nvue。

2021-05-25 11:30
2***@qq.com (作者)

回复 9***@qq.com: 他也不报错这个排查就很迷

2021-05-25 11:36
2***@qq.com (作者)

回复 9***@qq.com: 我在之前的排查当中发现第一次进入页面的时候他是不打印轮播图的数据的，onloand里面的其他数据可以打印,就是轮播图的数据然后我就使用了onshow,让页面每次出现在屏幕上都触发这个请求

2021-05-25 11:41
9***@qq.com

回复 2***@qq.com: 那现在的主要问题就是：onload时，无法请求到轮播图。

2021-05-25 11:46
2***@qq.com (作者)

回复 9***@qq.com: 对 onload无法请求到但是onshow可以请求到而且有这么个情况我要是不加onload，页面第一次无法渲染但是我切换页面在切换回来可以显示出必须要我2个生命周期同时都请求这个轮播图接口就可以了

2021-05-25 11:52
9***@qq.com

回复 2***@qq.com: 那你的首页，是nvue页面，还是vue页面

2021-05-25 11:57
2***@qq.com (作者)

回复 9***@qq.com: 怎么区分是nvue页面还是vue页面我使用的hb开发的创建也是使用的这个软件

2021-05-25 12:01
9***@qq.com

回复 2***@qq.com: 在pages目录里，新建的文件，如果是.nvue结尾的文件，就是nvue

2021-05-25 15:28
2***@qq.com (作者)

回复 9***@qq.com: vue

2021-05-25 15:36
9***@qq.com

回复 2***@qq.com: uview在vue页面中，一般不会出错。

2021-05-25 17:10

9***@qq.com - 非要验证吗

还有就是生命周期的问题，你可以在mount(){}里写写试试。

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

uniapp首页轮播图

4 个回复

公告

相关问题

uniapp首页轮播图

与内容相关的链接

4 个回复

公告

相关问题