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


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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JavaScript 异步调用
Oct 25 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JavaScript实现点击图片换背景
Nov 20 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
js调用flash的效果代码
2008/04/26 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue框架搭建之axios使用教程
2018/07/11 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
python友情链接检查方法
2015/07/08 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python hash每次调用结果不同的原因
2019/11/21 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python中round函数保留两位小数的方法
2020/12/04 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
经典C++面试题一
2016/11/06 面试题
出国考察邀请函
2014/01/21 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
信访维稳工作汇报
2014/10/27 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
基于Python实现射击小游戏的制作
2022/04/06 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang