拼团微信小程序开发_微信小程序完美解决scroll

微信小程序完美解决scroll-view高度自适应问题的方法       这篇文章主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

scroll-view {
 height: 100vh;

第二种情况，scroll-view自适应页面剩余高度

xml文件

 view 
 view /view 
 scroll-view /scroll-view 
 /view 

wxss文件

.box {
 display: flex;
 flex-direction:column;
 height:100vh;
 overflow:hidden;
.box-head {
 flex-shrink: 0;
 height: 50px;
.box-scroll {
 flex: 1;
 height: 1px;

flex：1 高度依然不会自适应加一个默认高度1px就可以自适应了

通用组件化处理

list.wxml

 scroll-view
 class="list-scroll {{ autoHeight 'list-scroll--auto' : '' }}"
 scroll-y
 enable-back-to-top
 bind:scrolltolower="scrolltolower"
 slot /slot 
 !-- 加载完成 -- 
 view wx:if="{{ finished }}" 
 view {{ finishedText }} /view 
 /view 
 !-- 加载效果 -- 
 view wx:elif="{{ loading }}" 
 van-loading type="spinner" size="20" /van-loading 
 /view 
 /scroll-view 

list.scss(需编译成list.wxss)

.list {
 -scroll {
 flex: 1;
 height: 100vh;
 --auto {
 height: 1px;
 -loading {
 margin: 10px 0;
 text-align: center;
 __text {
 font-size: 16px;
 color: #a6a6a6;
 line-height: 1;

list.js

// components/list/list.js
Component({
 externalClasses: ["class"],
 options: {
 virtualHost: true, // 组件虚拟化
 * 组件的属性列表
 properties: {
 // 加载状态
 loading: {
 type: Boolean,
 value: false,
 // 加载完成
 finished: {
 type: Boolean,
 value: false,
 // 加载完成文字
 finishedText: {
 type: String,
 value: "没有更多了",
 // 自动初始化获取数据
 autoInit: {
 type: Boolean,
 value: true,
 // flex自定适应高度
 autoHeight: {
 type: Boolean,
 value: false,
 * 组件的方法列表
 methods: {
 * 滚动到底部阈值
 scrolltolower() {
 // 退出执行
 if (
 this.data.emptyText || // 没有数据
 this.data.loading || // 正在加载
 this.data.finished // 加载完成
 return;
 this.setData({
 loading: true,
 this.triggerEvent("load");
 * 组件声明周期
 lifetimes: {
 attached() {
 // 自动初始化
 if (this.data.autoInit) {
 this.scrolltolower();

组件化后一定要设置组件虚拟化。否则高度还是不会自适应

list.json

"component": true,
 "usingComponents": {
 "van-loading": "@vant/weapp/loading/index"

需要安装van-loading或者自己写一个loading效果

使用

全屏

 com-list /com-list 

自适应

 com-list auto-height /com-list 

到此这篇关于微信小程序完美解决scroll-view高度自适应问题的方法的文章就介绍到这了,更多相关小程序scroll-view高度自适应内容请搜索凡科以前的文章或继续浏览下面的