织梦cms微信小程序完美解决scroll-view高度自适应问题的方法介绍
<scroll-view></scroll-view>
properties: { // 加载状态loading: { type: Boolean, value: false,
/**
) {
xml文件
到此这篇关于微信小程序完美解决scroll-view高度自适应问题的方法的文章就介绍到这了,希望大家以后多多支持！
},
// 退出执行
组件化后一定要设置组件虚拟化。否则高度还是不会自适应
// 自动初始化获取数据
/**
* 组件的方法列表
<!-- 加载完成 -->
* 组件的属性列表
list.wxml
this.setData({
全屏
*/
},
finished: { type: Boolean, value: false,
scroll-y
<!-- 加载效果 -->
Component({ externalClasses: ["class"],options: {virtualHost: true, // 组件虚拟化
return;
},
},
// 加载完成文字
loading: true,
attached() {
}
}
<slot></slot>
scrolltolower() {
<view>第二种情况，scroll-view自适应页面剩余高度
* 滚动到底部阈值
methods: {
<view></view>
}
使用
}
这篇文章主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
*/
enable-back-to-top
*/
autoHeight: { type: Boolean,value: false,
需要安装van-loading或者自己写一个loading效果
.box-head {flex-shrink: 0; height: 50px;
},
},
</view>
/**
<com-list auto-height></com-list>"usingComponents": { "van-loading": "@vant/weapp/loading/index"
&-loading {margin: 10px 0; text-align: center; &__text { font-size: 16px;color: #a6a6a6; line-height: 1;
/**
>
},
<view>{{ finishedText }}</view>
<com-list></com-list><view wx:elif="{{ loading }}">
this.data.emptyText || // 没有数据
list.js
自适应
}
*/
.list {&-scroll {flex: 1; height: 100vh; &--auto { height: 1px; }list.scss(需编译成list.wxss)
this.triggerEvent("load");
},
<scroll-viewautoInit: { type: Boolean, value: true,
<view wx:if="{{ finished }}">
</view>
list.json
通用组件化处理
flex：1 高度依然不会自适应加一个默认高度1px就可以自适应了
</view>
// 加载完成
</scroll-view>
* 组件声明周期
}
finishedText: { type: String,value: "没有更多了",
lifetimes: {
},
}
.box-scroll { flex: 1;height: 1px;
// components/list/list.jswxss文件
},
this.data.loading || // 正在加载
this.data.finished // 加载完成
scroll-view {height: 100vh;}});
class="list-scroll {{ autoHeight ? 'list-scroll--auto' : '' }}"
第一种情况，scroll-view占据整屏
// 自动初始化
}
<van-loading type="spinner" size="20"></van-loading>
.box { display: flex; flex-direction:column; height:100vh;overflow:hidden;}
// flex自定适应高度
});
bind:scrolltolower="scrolltolower"
if (
}
},
if (this.data.autoInit) {this.scrolltolower();
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jz/wp/4948.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
ludou_se_only); } add_action(s
时间：2021-01-23
-
所以经常导致输错密码的
时间：2021-01-23
-
WordPress措施打开速度慢的
时间：2021-01-22
-
WordPress回覆评论自动添加
时间：2021-01-22
-
我们可以通过下面的代码
时间：2021-01-22
-
如何修改WordPress默认脚色
时间：2021-01-20
-
同样的修改文件就行
时间：2021-01-20
-
少数善意的转载者既使没
时间：2021-01-20
热门文章
-
WordPress新手安装教程(图文)
时间：2020-12-28
-
在设置菜单中增加WordPress私密 隐藏的全部
时间：2021-01-10
-
WordPress博客程序常见错误的解决方法
时间：2020-12-28
-
WordPress程序打开速度慢的三种解决方法
时间：2021-01-10
-
wordpress使用代码在每篇文章尾部添加版权
时间：2020-12-14
-
WordPress博客措施常见错误的办理要领
时间：2021-01-15
-
关于WordPress的SEO优化相关的一些PHP页面脚
时间：2021-01-07
-
WordPress措施打开速度慢的三种办理要领
时间：2021-01-22
-
详解WordPress中的头像缓存和署理中的缓存
时间：2021-01-15
-
少数善意的转载者既使没有看到版权信息
时间：2021-01-20