微信小程序完美解决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 相关文章推荐
javascript判断机器是否联网的2种方法
Aug 09 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
JavaScript中如何调用Java方法
Sep 16 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写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python translator使用实例
2008/09/06 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
xxx同志考察材料
2014/02/07 职场文书
总经理工作职责范文
2014/03/14 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
毕业大学生自荐信
2014/06/17 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
三峡人家导游词
2015/01/31 职场文书