微信小程序完美解决scroll-view高度自适应问题的方法


Posted in Javascript onAugust 08, 2020

第一种情况,scroll-view占据整屏

微信小程序完美解决scroll-view高度自适应问题的方法

scroll-view {

 height: 100vh;

}

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

微信小程序完美解决scroll-view高度自适应问题的方法

xml文件

<view class="box"> 
 <view class="box-head"></view>
 <scroll-view class="box-scroll"></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 }}" class="list-loading">
  <view class="list-loading__text">{{ finishedText }}</view>
 </view>

 <!-- 加载效果 -->
 <view wx:elif="{{ loading }}" class="list-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高度自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
js实现tab切换效果
Feb 16 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
javascript中正则表达式语法详解
Aug 07 #Javascript
vue 子组件修改data或调用操作
Aug 07 #Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 #Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 #Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 #Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 #Javascript
You might like
php adodb连接不同数据库
2009/03/19 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
django 信号调度机制详解
2019/07/19 Python
深入解析神经网络从原理到实现
2019/07/26 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
运动会广播稿300字
2014/01/10 职场文书
辩论赛主持词
2014/03/18 职场文书
募捐倡议书
2014/04/14 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
葬礼主持词
2015/07/02 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
创业计划书之餐饮
2019/09/02 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android