在项目开发中遇到一个关于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布局。

至此,问题解决。

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

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

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

    代码地址如下:http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.co ...

  3. 微信小程序 发现之旅(一)—— 项目搭建与页面跳转

    开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...

  4. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  5. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  6. 微信小程序之下拉刷新,上拉加载更多

    近日开发微信小程序,发现上拉加载更多没有友好的API,而下拉刷新很nice,所以本人按照API,很简单的写了一个示例,希望对大家有帮助,本人用的是iview-webapp  小程序UI框架. 1. 首 ...

  7. 微信小程序环境下将文件上传到 OSS

    步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...

  8. 微信小程序 springboot nginx 做图片存储 上传 浏览

    微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...

  9. 微信小程序wx.request请求服务器json数据并渲染到页面

    [原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...

随机推荐

  1. 项目中cxf和weblogic整合时报错的问题

    GJYW项目使用的weblogic版本是10.3.6,cxf使用的版本是3.1.4 在将项目部署到weblogic服务器上时就会报错,通过下面的方式可以解决weblogic和cxf框架在一起报错的问题 ...

  2. 通过代码退出IOS程序

    -(void) tapClick:(UITapGestureRecognizer *)tap{ [UIViewbeginAnimations:@"exitApplication"c ...

  3. #leetcode刷题之路17-电话号码的字母组合

    给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合.给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例:输入:"23"输出:["a ...

  4. fail2ban 防暴力破解总结

    公司服务器安全问题一直是个令人头疼的问题,许多运维的小伙伴一直在用脚本来监控服务器登录状态,然而脚本编写比较麻烦,今天就给大家推荐一款小而精致的防暴力破解工具 fail2ban ,他可以监控系统日志, ...

  5. [已解决] 设置无效字段为-1 时,引发的 DataGridView DataError

    由于问题一句话说不清.所以标题里也没写明白.大概情况是这样.我一直使用dotNetBar控件来做UI,其中的DataGridView很常用.过去一直有发现DataError的错误,通过截取消息暂时屏蔽 ...

  6. 1.Hadoop集群安装部署

    Hadoop集群安装部署 1.介绍 (1)架构模型 (2)使用工具 VMWARE cenos7 Xshell Xftp jdk-8u91-linux-x64.rpm hadoop-2.7.3.tar. ...

  7. 树莓派3B+学习笔记:11、查看硬件信息

    1.查看CPU信息 cat /proc/cpuinfo 查看最后三行 如果只想查看最后三行,也可使用这个命令 /proc/cpuinfo lscpu 2.查看树莓派型号 cat /proc/devic ...

  8. 树莓3B+_Raspbian 源使用帮助

    https://mirrors.ustc.edu.cn/help/raspbian.html   Raspbian 源使用帮助 地址 https://mirrors.ustc.edu.cn/raspb ...

  9. python3+pyzbar+Image 进行图片二维码识别

    1.前言 最近公司有个项目要写个程序自动识别客户提交照片里的二维码,一接到这个任务马上就想到了用Python这个万能的工具! 2.搜寻 首先在网上到处找了很多“灵感”,看看其他人都会用什么包来完成这个 ...

  10. Java HashMap 源代码分析

    Java HashMap jdk 1.8 Java8相对于java7来说HashMap变化比较大,在hash冲突严重的时候java7会退化为链表,Java8会退化为TreeMap 我们先来看一下类图: ...