在项目开发中遇到一个关于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. TestNG+Maven+IDEA 自动化测试(一) 环境搭建

    示例代码: https://github.com/ryan255/TestNG-Demo 所需环境: 1. IDEA UItimate 2. JDK 3. Maven 创建工程 一开始创建一个普通的m ...

  2. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  3. vue+element 页面输入框--回车导致页面刷新的问题

    el-form 后面加上 @submit.native.prevent

  4. NodeJs 实现简单WebSocket 即时通讯

    至于服务器语言选择nodeJs,一是因为自己是做前端的,对javascript比较熟悉,相比于其他后台语言,自然会更喜欢nodeJs了, 二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发 ...

  5. MQTT入门2 -- “Error: Invalid password hash for user nick.”和“Connection Refused: not authorised.”

    原文地址:https://www.cnblogs.com/NickQ/p/9277315.html 问题描述: 搭建好mosqitto环境后,利用无密码验证方式,成功通过测试. 但修改配置文件将匿名访 ...

  6. 移植触摸屏驱动到linux3.4.2

    1. 修改drivers/input/touchscreen/下的Makefile #obj-$(CONFIG_TOUCHSCREEN_S3C2410) += s3c2410_ts.o obj-$(C ...

  7. scala (2) while 和变量

    (1)在scala中声明变量有两个关键字,val和var val: 是不可变的,即声明了变量不能再进行更改,类似于java中的final var: 是可变的,即可以重新对其赋值 声明变量的通用格式:  ...

  8. 《JAVA程序设计》20155214 实验一 Java开发环境的熟悉(Linux + IDEA)

    <JAVA程序设计> 实验一 Java开发环境的熟悉(Linux + IDEA) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Ja ...

  9. 20155305乔磊2016-2017-2《Java程序设计》第一周学习总结

    学习考核方式后感 老师对于成绩的获得有很多细节的地方,获得高分很不容易,考核次数也很多,100分分为课堂考核,实验,团队项目,老师对我们的要求可以说非常的严格,我也为有一个要求严格的老师感到幸运荣幸. ...

  10. 20155321 2016-2017-2 《Java程序设计》第三周学习总结

    20155321 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 4.1 类与对象 定义类用class关键字,建立实例用new关键字 一个原始码中可有多个类定 ...