uni_app swiper小坑问题

最新推荐文章于 2024-04-10 16:39:40 发布
最新推荐文章于 2024-04-10 16:39:40 发布
阅读量4.7k 收藏
点赞数
分类专栏： uni_app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45010567/article/details/105423216
版权
  • 最近用uni_app 编译一个小程序，里面有一个 轮播图功能。不过只有一张图。

在这里插入图片描述
大约是这个样子，第一个感觉就是给swiper 加定位，然后z-index,效果做出来了。
过一会发现轮播图花滑动不了。弄了半天还是不行。最后放弃了给下面的盒子加的定位，用margin-top顶上去了。很烦。
写个博客提醒自己。。。。
前端新手》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

大强写代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-swiper-list.rar
04-23
uni-app上拉加载
uni-app tab滑动切换
热门推荐
qq_43579525的博客
07-13 1万+
1.父组件index.vue <template> <view> <!-- * 头部tab * 1.头部tab在点击的时候需把自己的index传到父组件中去通过 * this.$emit('方法名',index); * * --> <swiper-tab-head :tabBars="tabBar...
uni-app中动态改变swiper的current
qq_29184685的博客
09-07 6336
uni-app中动态改变swiper的current <template> <view> <swiper @change="changeswiper" :current="currentswiper" class="swiper" circular indicator-dots="indicatorDots" > <swiper-item v-for="(item,index) in 9"> <view class="swiper-i
uniapp开发小程序，实现堆叠卡片轮播图
最新发布
weixin_48596030的博客
04-10 838
uniapp开发小程序，实现堆叠卡片轮播图
解决uniapp scroll-view下拉刷新无法复位
NGLLLLLL的博客
12-02 5121
解决uniapp scroll-view下拉刷新无法复位
uni-app采坑之路——swiper
qq_45432996的博客
04-29 7865
这里本来是要写轮播图的，明明设置好了swiper的高度值，宽度也设置成了100%，再看微信小程序和app的样式，纳尼？！！！！ 竟然显示不一样！轮播图有一部分竟然没有了 解决方法： 在swiper的页面添加swiper标签的样式，用样的复制一份,就搞定了 题外话： swiper的坑： 1.组件名称swiper.vue 或者Swiper.vue ,在传递数据的时候有可能图片就不见了。 2....
mod_ju_swiper_swiper_joomla_
10-03
swiper.js module for joomla
使用uni-swiper-dot组件，开发轮播图
04-28
1、使用HbuildX工具，引入uni-ui插件，使用uni-swiper-dot组件，开发轮播图 2、轮播图的三种mode:nav、dot、indexes
微信小程序swiper使用网络图片不显示问题解决
10-15
主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下
uniapp 修改swiper样式
weixin_40918145的博客
07-08 6105
在小程序和app中，更改官方组件样式，swiper重写样式H5页面有效，app无效，解决方法如下 用wx-开头可以覆盖 比如swiper的默认样式为 uni-swiper .uni-swiper-wrapper{} 只需要在css里面加一条wx-swiper .wx-swiper-wrapper{} 就可以覆盖了 ps: 单位用px或rpx /* wx */ wx-swiper .wx-swiper-dot { width: 10px; height: 3px; } wx-s
在uniapp中使用swiper处理滑动边界问题
牵着蜗牛去旅行的博客
06-15 3376
在用uniapp做项目的时候发现tab页切换到边界的时候会漏出半个屏幕的空隙，而正常的tab切换则是滑到边界后切换到下一个选项卡，后来百度好久，终于找到了这个解决的办法 <template> <view > <scoll :list="scoll" @getIndex="getIndex1" :activeIndex.sync="activeIndex" class="padding"></scoll> <swiper :style="{
uni-app swiper数量过多时卡顿优化方案
weixin_38946164的博客
02-16 8265
当源数组长度是12的时候，效果图如下：当源数组长度是11的时候，需要追加1张空白页，效果图如下：当源数组长度是13的时候，需要追加2张空白页，效果图如下：源码下载地址：链接：https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwd=l9zp提取码：l9zp。...
uniapp中 解决swiper 包裹元素 显示不完的问题
weixin_43720534的博客
04-24 2401
Swiper 在包含内容时是有一个默认高度height：150px；的 此时我们要展现出来的内容区域就会被缩减掉 所以我在需要swiper 包裹元素时需要重新获取。内容高度的 我们将要展示的内容有一个view包裹起来 随便给view一个class名 如 home-data 使用uniapp的api获取home-data的所有的消息。api 文档 界面>节点消息 在data中定义一个存放 高度...
uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题
Rudon滨海渔村的博客
03-26 1万+
问题所在 swiper无法自适应高度，内容显示不全。 解决思路（4个） 1.懒人法： 直接设置整个swiper高度，100vh等于全屏高度。 （idea来源） <swiper @change="change" style="min-height:100vh;"> 2.官方推荐：https://uniapp.dcloud.io/component/swiper.html 使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 css 设置 h...
uni-app快速入手 ——（10）ios上scroll-view局部滚动区域卡顿，滚动区域事件卡顿替代方案
csl125的博客
08-15 3896
在制作类似于picker 弹框多选时使用 scroll-view，在安卓上很流畅，但是在ios13上很卡顿，滚动到顶部或底部直接卡死，而且滚动区域的事件也很卡顿，经常无效不能触发，本文解决方案是 使用swiper替代scroll-view 此弹框就是scroll-view 滑动卡顿 代替方案： <template> <view> <uni-popup ref="multiplePop" type="bottom" style="width: 100%;..
uniapp延迟执行_【 vue / uniapp 】延迟加载数据的特殊处理
weixin_34942265的博客
12-31 5826
在用vue实现一个无限层级的树型结构时，遇到了这个问题。页面结构如图：其中，父页面的处理逻辑：步骤一：引用并挂载组件，同时向组件props传递树型JSON列表数据(this.list)，当然这时候的 this.list 还只是一个空数组。步骤二：在 onload 事件中从服务器获取树型JSON数据并回写到 this.list，同时这个 this.list 也会自动通过 props 传递给组件。当时...
uniapp u-tabs-swiper的使用
树上骑个猴的博客
01-19 6847
<view class="page-content"> <view> <u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChange" ></u-tabs...
uni-app swiper
08-25
在 Uni-app 中，你可以使用 Swiper 插件来创建轮播图组件。 要在 Uni-app 中使用 Swiper，首先需要在项目中安装 Swiper 插件。可以通过 npm 命令来进行安装： ``` npm install uni-swiper ``` 安装完成后，在需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值