flex解决微信小程序ScrollView等组件高度自适应

小程序页面开发时经常需要用的`scroll-view` 和 `swiper这`两个组件，官方文档显示这两个组件需要设置固定的高度才好用。

当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。

//获取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight;

再用屏幕高度screenHeight减去其他模块高度，后来是利用flex的flex:1完美解决

1.wxml

<swiper indicator-dots interval><swiper-item wx:for='{{List}}' wx:key='index'><view style="background-color: {{item}};" class="block"></view></swiper-item>
</swiper>
<!--1. 将页面整体设置为flex布局
height: 100%;display:flex;flex-direction: column;
-->
<!-- 2.将scroll-view放在一个view中,flex:1 -->
<view class="scroll"><scroll-view class="image-group" scroll-y="true" bindscrolltolower="taskLower" style="height:100%"><view class="card" wx:for="{{cardList}}" wx:key='index'>{{item.name}}{{index}}</view></scroll-view>
</view>

2.js

Page({/*** 页面的初始数据*/data: {List: ['#3397FF', '#A360EE', '#02B842'],cardList: [{name: "card"}, {name: "card"}, {name: "card"}, {name: "card"}, {name: "card"}, {name: "card"}]},onLoad(options) {},taskLower() {let list = this.data.cardListfor (let i = 0; i < 6; i++) {list.push({ name: "card"})}this.setData({cardList: list})}
})

3.wxss

page {height: 100%;display: flex;flex-direction: column;
}.block {width: 100%;height: 400rpx;
}.card {margin: 10rpx 30rpx;height: 160rpx;box-shadow: 8px 0px 14px 4px rgba(52, 152, 255, 0.06);
}.scroll{flex: 1;overflow: scroll;
}

4.查看效果

flex解决微信小程序ScrollView等组件高度自适应相关推荐

php小程序中的页面如何换行,解决微信小程序scroll-view换行问题
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行,代码如下: asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkaj ...
微信小程序滚动选项卡 swiper高度自适应
最近做小程序的时候遇到了swiper高度的问题,swiper里面的内容可以根据数据来自适应高度.那就给scroll-view计算一下高度 wxml <view class="conta ...
解决微信小程序scroll-view高度自适应问题的方法
第一种情况,scroll-view占据整屏 html scroll-view {height: 100vh;} 第二种情况,scroll-view自适应页面剩余高度 wxml <view cla ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
微信小程序scroll-view高设置100%在苹果6p下的兼容性问题
微信小程序scroll-view高设置100%在苹果6p下的兼容性问题 home.wxml <view class='main'><view class='crumbs'>&l ...

flex解决微信小程序ScrollView等组件高度自适应

小程序页面开发时经常需要用的`scroll-view` 和 `swiper这`两个组件，官方文档显示这两个组件需要设置固定的高度才好用。

flex解决微信小程序ScrollView等组件高度自适应相关推荐

最新文章

热门文章

flex解决微信小程序ScrollView等组件高度自适应

小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件，官方文档显示这两个组件需要设置固定的高度才好用。

flex解决微信小程序ScrollView等组件高度自适应相关推荐

最新文章

热门文章

小程序页面开发时经常需要用的`scroll-view` 和 `swiper这`两个组件，官方文档显示这两个组件需要设置固定的高度才好用。