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


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 相关文章推荐
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
JS实现十分钟倒计时代码实例
Oct 18 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
用jquery.sortElements实现table排序
2014/05/04 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
pywinauto自动化操作记事本
2019/08/26 Python
python是否适合网页编程详解
2019/10/04 Python
利用python实现AR教程
2019/11/20 Python
如何获取Python简单for循环索引
2019/11/21 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
天地会口号
2014/06/17 职场文书
班级活动总结格式
2014/08/30 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
入团介绍人意见范文
2015/06/04 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python