微信小程序---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 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
随机推荐
- Request和Response中文乱码问题的解决方案和区分
首先,在刚接触这个中文乱码问题的时候,还是比较混乱的,因为针对request和response各自都有自己的解决方案,而且思路相似,方法也很相似,又针对get和post两种提交方式,分两种解决中文乱码 ...
- 如何做好一个优秀的web项目心得
最近利用空余的时间(坐公交车看教程视频),想了很多自己做的做果项目的优缺点,重新了解了前后端分离,前端工程化等概念学习,思考如何打造好一个优秀的web前端项目. 前端准备篇 前端代码规范:制定前端开发 ...
- iview中tree的事件运用
iview中的事件和方法如下: 案例说明: html代码 <Tree :data="data4" @on-check-change="choiceAll" ...
- laravel5.5源码笔记(二、服务提供者provider)
laravel里所谓的provider服务提供者,其实是对某一类功能进行整合,与做一些使用前的初始化引导工作.laravel里的服务提供者也分为,系统核心服务提供者.与一般系统服务提供者.例如上一篇博 ...
- [修正] Firemonkey Android 文字斜粗体显示不全的问题
问题:Firemonkey Android 平台显示斜粗体文字时,文字右方会有显示不全的问题. 修正代码: 请将 FMX.FontGlyphs.Android.pas 复制到自己的工程目录下,再修改如 ...
- 浏览器窗口输入网址后发生的一段事情(http完整请求)
1.DNS查询得到IP 输入的是域名,需要进行dns解析成IP,大致流程: 如果浏览器有缓存,直接使用浏览器缓存,否则使用本机缓存,再没有的话就是用host 如果本地没有,就向dns域名服务器查询(当 ...
- 获取文件属性“详细信息” - StringFileInfo
0.什么是StringFileInfo1.获取方法2.示例代码 参考链接: 1.MS docs - GetFileVersionInfoA:https://docs.microsoft.com/zh- ...
- Golang Gin 项目包依赖管理 godep 使用
Golang Gin 项目包依赖管理 godep 使用 标签(空格分隔): Go 在按照github.com/tools/godep文档go get完包以后,调整项目结构为$GOPATH/src/$P ...
- 关于NODEJS性能测试和优缺点总结
最近公司开发了一套新产品,采用nodejs前端+Java后端框架,为完全的前后端分离结构,以下为相关信息. 软件及功能: 软件 功能 Nginx 负责反向代理和负载均衡 Nodejs 前端代码 JDK ...
- 20155204 2016-2017-2 《Java程序设计》第4周学习总结
20155204 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承是类与类之间的联系,接口是方法与类之间的联系,多态就是指利用接口和继承来派生许多类. 有 ...