uniapp中使用swiper时不显示不报错

快乐码猿

已于 2022-05-07 21:58:45 修改

阅读量1.9k

点赞数 3

分类专栏： uniapp 文章标签：前端 vue.js javascript css3 css

于 2022-05-07 21:50:24 首次发布

本文链接：https://blog.csdn.net/weixin_45727837/article/details/124640025

版权

uniapp swiper flex布局组件显示前端开发

关键词由CSDN通过智能技术生成

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uniapp中使用swiper时不显示不报错

uniapp中使用swiper时不显示不报错，flex布局会影响swiper组件，即便在外面套一层盒子也不起作用

在这里插入图片描述

解决方案：

不要把swiper写到有flex布局的盒子当中

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

快乐码猿

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp - 强力解决 swiper 轮播图内嵌套视频导致滑动不流畅卡顿问题，轮播滑块视图容器里既有图片也有视频video组件共同存在出现滑动切换特别卡，轮播组件包裹视频播放器加载慢及层级过高解决

王佳斌

07-25

6278

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，swiper，轮播图，轮播图嵌套视频，卡顿，加载慢，左右滑动不流畅，很卡，滑动过快就会卡住，uniapp使用swiper组件里嵌套视频与图片如何解决卡顿问题，详细解决教程，swiper里有视频video，播放器，视频+图片轮播，层级过高及卡顿问题，没等看完视频就自动切换了，报错，无法加载播放，uniapp的App安卓苹果端，video老是加载，APP端video组件播放视频卡顿，抖音，快手，上下滑动视

在vue项目中下载swiper出现：Do not use ‘new’ for side effects报错问题

YY的博客

12-01

944

在vue项目中下载swiper出现：Do not use ‘new’ for side effects报错问题

参与评论您还未登录，请先登录后发表或查看评论

uniapp中swiper的大坑，在swiper-item中嵌套video在移动端无法实现上下滑动的，要用nvue代替，从而实现抖音滑视频效果

07-25

8910

在移动端的时候，就会出现虽然切换到第二个视频了，声音也出来了，但是画面就是没有动。研究了一天，发现在swiper-item中嵌套视频时，移动端只能滑动切换背景，视频在原位置是不会动的。那就只能这么写了，为什么不动态设置宽度呢？为移动端创建单独的页面包括视频组件也是要单独创建一个nvue的。想做一个抖音滑屏切换视频的效果，结果。为什么要动态设置这个高度呢？使用nvue的教程；......

uniapp网络请求/轮播图/scroll-view

yanghongyan001的博客

03-10

2299

1.swiper轮播图 indicator-dots :是否显示面板指示点 autoplay :是否自动切换 interval :自动切换时间间隔 <template> <view> <swiper indicator-dots="true" autoplay="true" interval="2000"> <swiper-item&...

uniapp中使用swiper实现详情页面轮播图动态高度，实现仿某红薯图片展示轮播图效果。

最新发布

我很牛的

10-27

418

uniapp中swiper动态高度，实现仿某红薯轮播图效果。解决轮播图swiper高度不能随图片动态变化的问题，使其图片显示效果更佳。

Uniapp的Swiper无法显示内容

tomxiong的博客

05-22

1292

使用了Uniapp官网上的Swiper组件案例代码，但是Swiper标签内的所有内容无法显示。这个兄弟也曾遇到过类似问题，简直一模一样。我把代码贴出来。 //index.vue文件 <template> <view class='content'> <view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="page-se

解决 uniapp 微信小程序 swiper里的内容不显示问题 - 个人笔记

树上骑个猴的博客

02-07

3532

问题描述：页面是拥有3个item的swiper，每个swiper都是一个长滚动列表，每个列表都是都是一个个item(封装成名为dataItem的组件)，其中给dataItem组件传递“itemdata”和“currentType”参数，但是itemdata显示没问题，下面的按钮部分不显示(如果用户左右手动切换swiper又可以显示)，尝试了v-if、setTimeout、nextTick等都没有效果，后来才发现是currentType 的问题，于是把currentType 从v-if条件里面去掉。盲猜是s

uni-app中swiper组件无效果解决方案

li22356的博客

07-21

3485

今天，在写uni-app的代码过程中，发现swiper组件不起效果，出不来效果，查看官网发现是这个原因自动宽高100%，都自动了，就不需要自己设置了问题如下图所示：解决方案：去掉自己设置的宽高100%就好了代码如下： <template> <view class="videoList"> <view class="swiper-box"> <swiper class="swiper" :vertical="true">

解决uniapp中的swiper中只有一项swiper-item时自动轮播会失效

Alice_yo的博客

12-06

3739

做了一个h5的项目是用uniapp写的其中有一个轮播的功能发现有的时候自动轮播会失效后来发现当后台只有一项数据时动态渲染则swiper-item也只会出现一条那么这样则不会自动轮播用了官网的实例 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">

小程序swiper动态数据不显示

这是我的博客

09-02

3385

情景一：swiper的current不在第一页了，导致第一页的数据看不到。处理方法：在请求数据的时候重置current为0，即 <swiper class="banner swiper-box" circular="true" current="{{ current }}" next-margin="16px" previous-margin="16px" bindchange="swiperChange1" duration="500" interval="5000"> ... &l

vue-cli 中使用 swiper 插件

sliufua的博客

05-13

720

vue-lic使用swiper插件

uni-app小程序中swiper图片不显示

xiasohuai的博客

12-11

7542

<view class="swiper_img"> <uni-swiper-dot :info="info" :current="current" :mode="mode" field="content"> <swiper class="swiper-box" @change="change" :autoplay="true" :interval="300...

Uni-app中swiper组件图片（image）不显示的问题

H20220803的博客

11-27

2931

Uni-app中swiper组件图片（image）不显示的问题

uniapp中解决swiper 包裹元素显示不完的问题

weixin_43720534的博客

04-24

2548

Swiper 在包含内容时是有一个默认高度height：150px；的此时我们要展现出来的内容区域就会被缩减掉所以我在需要swiper 包裹元素时需要重新获取。内容高度的我们将要展示的内容有一个view包裹起来随便给view一个class名如 home-data 使用uniapp的api获取home-data的所有的消息。api 文档界面>节点消息在data中定义一个存放高度...

初学者随记02：uniapp开发微信小程序中，组件swiper轮播图片在ios显示不全问题，已解决

ChenMoJie_的博客

06-23

1974

问题：轮播图片在苹果手机只显示第一张图片，其他图片不显示原因：swiper-item 加了行内样式解决：不要在swiper-item写行内样式

uniapp使用自定义组件不显示自定义组件内容，不报错

qiuyushuofeng的专栏

06-21

2939

自定义组件向后台发送请求，没有触发函数

uniapp程序发布到微信小程序，能查到数据但无法显示

码农搬砖盖大楼

05-10

3436

uniapp程序发布到微信小程序，能查到数据但无法显示最近使用HBuilderX开发uniapp程序，开发中一切正常，但是发布到微信小程序后，无法显示查出的数据。现象排查中发现，控制台中已经打印出想要的数据，但是页面中未显示出来，且没有报错。对uniapp和微信小程序不熟悉，网上查询，有说赋值时，需要使用this.setData({paramName: paramValue}) ，不能直接使用this.paramName = paramValue，经试验无效(实际上是，this.paramName

在uniapp中使用swiper实例

06-01

在uniapp中使用swiper实例，你需要按照以下步骤操作： 1. 在页面的json文件中添加swiper组件。 ``` { "usingComponents": { "swiper": "/path/to/swiper" } } ``` 2. 在页面wxml文件中添加swiper组件。 ``` <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> <swiper-item>Slide 1</swiper-item> <swiper-item>Slide 2</swiper-item> <swiper-item>Slide 3</swiper-item> </swiper> ``` 3. 在页面的js文件中定义swiper组件的数据和方法。 ``` data: { indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, circular: true } ``` 4. 你可以在js文件中定义一些回调函数，来处理swiper组件的事件。比如： ``` // 当前页面被滑动时触发 onSwiperChange: function(e) { console.log(e.detail.current) } ``` 以上就是在uniapp中使用swiper实例的步骤。如果你需要更多的帮助，请参考uniapp官方文档。