微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题
在项目开发中遇到一个关于scroll-view的的问题,具体如下:
项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增加一个wrap,将所有的item放在wrap内,
将wrap设置为display:flex,这种方式在安卓手机不会导致任何问题,在苹果手机样式也不会有什么问题,但是当item的个数较多导致超出一屏,scroll-view
滑动触底或者触顶就会导致页面抖动。解决方案如下:
sroll-view组件直接包裹item, 注意以下两点:
- 一定要将scroll-view容器设置宽度,并设置white-space: nowrap;
- 一定要将scroll-view容器的每一项(item)都设置宽度和display:inline-block
也可以在item内再套一层,使用flex布局。
至此,问题解决。
微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序之下拉刷新,上拉更多列表实现
代码地址如下:http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.co ...
- 微信小程序 发现之旅(一)—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序之下拉刷新,上拉加载更多
近日开发微信小程序,发现上拉加载更多没有友好的API,而下拉刷新很nice,所以本人按照API,很简单的写了一个示例,希望对大家有帮助,本人用的是iview-webapp 小程序UI框架. 1. 首 ...
- 微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
- 微信小程序 springboot nginx 做图片存储 上传 浏览
微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...
- 微信小程序wx.request请求服务器json数据并渲染到页面
[原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
随机推荐
- 删除gitlab上的分支
好久没有更新了, 今天记录一下删除gitlab上的分支的操作 登录仓库后, 依次点击: project --> home --> Readme --> repository --&g ...
- 用 map 表达互斥逻辑
在这个开发周期遇到这样一个需求: 管理员可以给子账号配置权限,有些权限存在互斥不可同时勾选,比如 审核员和代采.审核和采购员不可同时勾选 之前同事实现的方式如下: 这样每添加一个互斥关系就要遍历一次, ...
- VS2015菜单栏重复删除
举个例子,这个是工具栏的,出现了重复 只要选择工具栏自定义那个选项,在多余命令的下方,先删除几个外部命令,然后把空行删除,最后全部重置即可 结果如下图
- BZOJ 1941: [Sdoi2010]Hide and Seek(k-d Tree)
Time Limit: 16 Sec Memory Limit: 162 MBSubmit: 1712 Solved: 932[Submit][Status][Discuss] Descripti ...
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- PHP常用函数归类【持续整理】
学习了这么久PHP,基础知识总感觉不牢靠,尤其是数组,字符串函数的应用,全部手敲过次手,做出总结都是基础,在回顾一下吧. 一.PHP基础语法 变量,常量 严格区分大小写,但内置结构或关键字无所 ...
- 我的 Delphi 学习之路 —— Delphi 助手的安装
标题:我的 Delphi 学习之路 -- Delphi 助手的安装 作者:断桥烟雨旧人伤 Delphi 助手的安装 CnWizards 类似于 VS 中的番茄助手,在编写 Delphi 代码时帮助极大 ...
- 定时任务命令crontab
crontab: * * * * * [user] command分 时 日 月 周 [用户] 命令 第1列表示分钟0-59 每分钟用*或者 */1表示第2列表示小时0-23(0表示0点)第3列表示 ...
- FlexPaper 里的pdf2json.exe 下载地址
在使用FlexPaper 做在线阅读,需要使用到pdf2json.exe,将PDF转成JSON或者XML格式,网上很少下载的,现在提供一个下载的地址 http://pan.baidu.com/s/1i ...
- 20155212——man指令的使用及mypwd的实现
man指令的使用及mypwd的实现 man指令的使用 一.man -k的k参数以及代表的意思 代号 代表內容 1 使用者在shell中可以操作的指令或可执行档 2 系統核心可呼叫的函数与工具等 3 一 ...