微信小程序之滚动视图容器的实现方法


Posted in Javascript onSeptember 26, 2017

微信小程序之滚动视图容器的实现方法

直接上两种方案代码以及效果图:

方案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是我目前总结出来的比较好的滚动视图方案。

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
javascript Excel操作知识点
Apr 24 Javascript
angularjs基础教程
Dec 25 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
js实现分割上传大文件
Mar 09 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS快速实现简单计算器
Apr 08 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 #Javascript
深入理解Vuex 模块化(module)
Sep 26 #Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 #Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
Vue from-validate 表单验证的示例代码
Sep 26 #Javascript
微信小程序之蓝牙的链接
Sep 26 #Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Numpy之reshape()使用详解
2019/12/26 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
行政人员岗位职责
2013/12/08 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
中学生打架检讨书
2014/02/10 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS