推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
github精选：微信小程序入坑指南：scroll-view
发布时间:2020-12-05
作者：YangAlas ，来自github
配合阅读文章：跳坑《一百一十三》组件系列：scroll-view
scroll-view的高度问题
有时候会遇见一个功能需求，就是在整个可视窗口需要有一个滚动区域，而我们给scroll-view设置高度为100%时，然并卵...官方是这样说的
测试例子设置scroll-view高度为100%；
结构用列表渲染 data: { text: [ 1,2,3,4,5,6,7,8,9,10 ] } <!--wxml--> <view class="page"> <scroll-view class="scrollView" scroll-y="true"> <block wx:for="{{text}}" key:for="{{item}}"> <view class="item">{{item}}</view> </block> </scroll-view> </view> /*wxss*/ .scrollView{ height: 100%; // 设置scroll-view的高度为100%； width: 500rpx; background: grey; } .item{ width: 100%; height: 150rpx; background: #f5f5f5; margin-bottom: 20rpx; }
效果图gif
可以看出设置100%的高度无效
获取视口高度，然后绑定数据到scroll-view上 ``` 行内样式 绑定获取到的视口高度 {{item}} ``` onLoad: function () { console.log('onLoad') var that = this wx.getSystemInfo({ success: function(res) { console.log(res) console.log(res.windowHeight) that.setData({ wHeight: res.windowHeight }) } }) }
效果图gif
文档是这么阐述的
效果图gif
