weex scroller滚动列表实践

weex 提供了<scroller>滚动组件，可以容纳子组件进行横向或竖向滚动。如果组件需要进行滚动，可以将 <scroller>当作根元素或者父元素使用，否则页面无法滚动（ <list> 组件除外， <list> 默认可以滚动）。

使用<scroller>滚动组件，需要注意点的：

不允许相同方向的 <list> 或者 <scroller> 互相嵌套，换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。
<scroller>需要显式的设置其宽高，可使用 position: absolute; 定位或 width、height 设置其宽高值。

子组件支持上，<scroller>支持任意类型的 Weex 组件作为其子组件。其中，还支持以下两个特殊组件作为子组件：

<refresh>: 用于添加下拉刷新的功能。
<loading>: 用于添加上拉加载更多的功能

使用滚动组件<scroller>具体需要注意的事项见scroller 简介

直接贴代码，利用<scroller>支持的<refresh>、<loading>组件实现，上拉加载下一页，下拉刷新的列表页。

<template><scroller class="scroller"  @loadmore="onloadmore" loadmoreoffset="0"><refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"><text class="indicator-text">{{pullDownTipTxt}}</text><loading-indicator class="indicator"></loading-indicator></refresh><div class="cell" v-for="num in lists" :key="num"><div class="panel"><text class="text">{{num}}</text></div></div><loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'"><text class="indicator-text">Loading ...</text><loading-indicator class="indicator"></loading-indicator></loading></scroller>
</template><script>const modal = weex.requireModule('modal')export default {data () {return {loadinging: false,       refreshing: false,lists: [1, 2, 3, 4, 5],pullDownTipTxt: '下来刷新'                  // 下拉加载默认文案}},methods: {onloading (event) {console.log('--------onloading--------');modal.toast({ message: 'Loading', duration: 1 })this.loadinging = truesetTimeout(() => {this.loadinging = false}, 2000)},onrefresh (event) {console.log('---------onrefresh------');modal.toast({ message: 'Refreshing', duration: 1 })this.refreshing = true;this.pullDownTipTxt = '刷新中...';this.lists = [];setTimeout(() => {this.refreshing = false}, 2000)this.getDataList();},onpullingdown (event) {    console.log('---------onpullingdown------');  if (event.pullingDistance > 50) {this.pullDownTipTxt = '松开立即刷新';} else {this.pullDownTipTxt = '下来刷新';}        },onloadmore: function (e) {const self = this;        console.log('---------onloadmore------');   this.getDataList();       },getDataList() {let data_list = Object.keys(Array.apply(null,{length: 5}));  // 随机生成5个数this.lists = this.lists.concat(data_list);}}}
</script><style scoped>.loading {width: 750;display: -ms-flex;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;}.indicator-text {color: #888888;font-size: 42px;text-align: center;}.indicator {margin-top: 16px;height: 40px;width: 40px;color: blue;}.panel {width: 600px;height: 250px;margin-left: 75px;margin-top: 35px;margin-bottom: 35px;flex-direction: column;justify-content: center;border-width: 2px;border-style: solid;border-color: #DDDDDD;background-color: #F5F5F5;}.text {font-size: 50px;text-align: center;color: #41B883;}
</style>

参考资料：

scroller简介

weex scroller滚动列表实践相关推荐

如何在 SwiftUI 中以编程方式滚动列表？
看起来在当前的工具/系统中,刚刚发布的 Xcode 11.4/iOS 13.4 中将没有 SwiftUI 原生支持"滚动到"功能List.因此,即使他们,Apple,将在下一个主要 ...
用Vue来实现音乐播放器（十六）：滚动列表的实现
滚动列表是一个基础组件他是基于scroll组件实现的在base文件夹下面创建一个list-view文件夹里面有list-view.vue组件 <template><!-- 当 ...
微信小程序实现无限滚动列表
实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:' ...
android 滚动列表框,建立滚动列表框
另一个可代替一组单选按钮及复选框的是滚动列表框(见图6.9).使用滚动列表框,你可以建立一个选项列表,用户可以从中选择一个或多个选项.你可以使用建立下拉式列表框的标识符来建立一个滚动列表框,只是使用不 ...
虚拟滚动列表和css虚拟滚动【有思考】
虚拟滚动列表助力性能优化我所理解的是,虚拟滚动需要一次性获取所有数据,但是只渲染显示屏幕可见范围内的那些. 要做到这些我需要知道: 一行的高度屏幕范围内能显示的行数列表在页面中距离网页顶部的位置 ...
html的li标签结合layui实现滚动列表
在项目开发中经常遇到需要实现一个滚动列表,所以讲已经实现好的代码,提炼出来,后期遇到类似需求可以照猫画虎代码如下 1.html页面部分 <!DOCTYPE html> <html& ...
Appium使用swipe定位滚动列表和滚动屏幕元素
app自动化测试时,会碰到下图这样的元素,点击商品类型,弹出的选择框是滚动列表使用uiautomatorviewer截图:滚动框为一个整体,无法定位到商品类型中的每一个元素,所以使用id,name无 ...
Laya---竖向滚动列表
与前面写的横向滚动列表稍微有点区别,竖向有点问题 1.右键---新建list组件--作为父物体不需要滚动条的话,vScrollBarSkin 填 " " 2.右键list --- ...
关于移动端滚动列表，不发起请求刷新列表的解决思路
前言最近在做一个移动端项目,项目中包含了滚动列表,点击列表项进入详情修改信息,或修改状态,会造成列表项信息改变,或者会从列表中移除,一直在想一个比较好的方案来处理列表信息的更新,试了记录下滚动条的位 ...

weex scroller滚动列表实践

weex scroller滚动列表实践相关推荐

最新文章

热门文章