微信小程序之滚动视图容器的实现方法
时间:2019-04-07
本文章向大家介绍微信小程序之滚动视图容器的实现方法,主要包括微信小程序之滚动视图容器的实现方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序之滚动视图容器的实现方法
直接上两种方案代码以及效果图:
方案1
这种方案是直接使用view,并设置overflow: scroll
wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view>
wxss:
.container { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; overflow: scroll; padding-bottom: 20rpx; background: #FD9494; } .content { margin: 20rpx auto 0 auto; width: 710rpx; height: 300rpx; background: #ddd; border-radius: 16rpx; font-size: 80rpx; line-height: 300rpx; text-align: center; }
效果图:
方案2
使用scroll-view + container作为容器
wxml:
<scroll-view class="main_container" scroll-y> <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> </scroll-view>
wxss:
.main_container { position: relative; width: 750rpx; height: 100vh; background: #FD9494; } .container { position: absolute; /*使用absolute的原因是因为为了防止第一个子视图有margin-top时,造成顶部留白的情况*/ left: 0; top: 0; width: 100%; padding-bottom: 20rpx; } .content { margin: 20rpx auto 0 auto; width: 710rpx; height: 300rpx; background: #ddd; border-radius: 16rpx; font-size: 80rpx; line-height: 300rpx; text-align: center; }
效果图:
对比结果:
因为iPhone上滚动会带有弹簧效果,所以方案1在滚动时会出现不流畅的现象。方案2就不会出现这种情况,而且滚动也是流畅的。
方案2是我目前总结出来的比较好的滚动视图方案。
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- JavaWeb11-jsp.cookie.session(2)
- 一个慢查询报警的简单处理 (r8笔记第12天)
- 厚土Go学习笔记 | 38. goroutine轻量级线程
- 厚土Go学习笔记 | 36. web服务指定路径下的get参数接收与处理
- Java开发Spring笔记第二天
- PHP调用Go服务的正确方式 - Unix Domain Sockets
- 一条看似平常的报警邮件所做的分析(r8笔记第9天)
- 55. 上传文件(Web版) | 厚土Go学习笔记
- R语言与机器学习学习笔记(分类算法
- 54. 心跳的实现 | 厚土Go学习笔记
- 通过错误的sql来测试推理sql的解析过程(二) (r8笔记第7天)
- 53. Socket服务三次握手的示例 | 厚土Go学习笔记
- R分词继续,"不|知道|你在|说|什么"分词添加新词
- Java开发Spring第一天
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL 索引
- notepad++ 配置c++及运行
- Leetcode 687. 最长同值路径
- Leetcode 1071. 字符串的最大公因子
- PAT (Advanced Level) Practice 1146 Topological Order (25分)
- 【风险预警】RPCBind服务被利用进行UDP反射DDoS攻击
- MySQL DDL 操作
- Leetcode 169 多数元素
- Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals) B. Cards Sorting 树状数组+技巧
- MySQL DML 操作
- select 查询基础
- 带大家体验一下删库跑路,不是虚拟机,是真的服务器哦!
- 数据库压力测试方法概述
- Codecraft-17 and Codeforces Round #391 (Div. 1 + Div. 2, combined) B. Bash's Big Day (Hash+简单数论)
- 随机点名系统——html初学实战