微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题

在项目开发中遇到一个关于scroll-view的的问题,具体如下:

项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增加一个wrap,将所有的item放在wrap内,

将wrap设置为display:flex,这种方式在安卓手机不会导致任何问题,在苹果手机样式也不会有什么问题,但是当item的个数较多导致超出一屏,scroll-view

滑动触底或者触顶就会导致页面抖动。解决方案如下:

sroll-view组件直接包裹item, 注意以下两点:

  1. 一定要将scroll-view容器设置宽度,并设置white-space: nowrap;
  2. 一定要将scroll-view容器的每一项(item)都设置宽度和display:inline-block

也可以在item内再套一层,使用flex布局。

至此,问题解决。

原文地址:https://www.cnblogs.com/cangqinglang/p/9755656.html

时间: 2024-10-09 08:25:32

微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题的相关文章

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

微信小程序实现多张图片同时上传的方法

对于微信小程序上传图片其实很麻烦的,每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数了.具体的实现方法来为大家分享一下.示例代码如下: wx.chooseImage({success: function(res) {var tempFilePaths = res.tempFilePathswx.uploadFile({url: 'http://example.weixin.qq.com/up

微信小程序为电商插上翅膀

微信小程序从2017年1月上线开始到现在即将满2周岁了,而2018年可以说是微信小程序的爆发年,它也向我们展示了惊人的成长速度.据统计,截至到2018年9月底,已上线微信小程序超过200 微信小程序从2017年1月上线开始到现在即将满2周岁了,而2018年可以说是微信小程序的爆发年,它也向我们展示了惊人的成长速度.据统计,截至到2018年9月底,已上线微信小程序超过200万个,有300万开发者加入,日活跃量超过4亿. 微信小程序,是基于微信的一种商业微程序,功能与市面上的APP差不多,不用下载,

微信小程序之下拉刷新,上拉更多列表实现

代码地址如下:<br>http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 目录结构说明 二.程序实现 1.运行开发工具 选择「本地小程序项目」 2.新建项目 3.开启接口域名免校验 4.运行效果 三.功能说明 1.通过page方式实现下拉刷新,上拉更多列表 onPullDownRef

微信小程序选择视频,视频上传,视频播放

请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobject 视频上传时和图片上传是一个道理需要使用小程序的上传模版:(将选择视频的链接传给后台,后台将链接转换成后台存储的路径) https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxuploadfileobject 视频播放:

微信小程序开发中wx.redirectTo与wx.navigateTo跳转页面未果

学习小程序开发中难免遇到一些小坑,作者在进行登录功能时遇到登录成功后,页面不可实现跳转到个人中心(admin/admin). 首先大致介绍一下本文的逻辑:验证用户信息后,需跳转页面到个人中心(tabBar页面),采用wx.redirectTo与wx.navigateTo两种方法均未实现,且不报错. 主要原因: admin/admin属于tabBar页面,采用上述两方法不会有任何效果,需采用wx.switchTab法进行跳转. 跳转完成页面: 页面跳转方法: 1.wx.navigateTo 保留当

微信小程序将view动态填满全屏

一.在app.js利用官方方法获取设备信息 App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res } }) }, globalData: { systemInfo: null } }) 获取到的windowWidth.windowHeight等度量单位为 px 二.在要使用的页面的js文件里将单位统一为rpx const app = getApp() P

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa