深圳市南山区住房和建设局网站,搜索引擎收录入口,创业做网站开发,青岛网站建设有限公司前言:可滚动视图区域。用于区域滚动
话不多说 直接上官网属性 官网示例 讲一下常用的几个
scroll 滚动时触发 scrolltoupper 滚动到顶部或左边#xff0c;会触发 scrolltoupper 事件
scrolltolower 滚动到底部或右边#xff0c;会触发 scrolltolower 事件
1.纵向滚动…前言:可滚动视图区域。用于区域滚动
话不多说 直接上官网属性 官网示例 讲一下常用的几个
scroll 滚动时触发 scrolltoupper 滚动到顶部或左边会触发 scrolltoupper 事件
scrolltolower 滚动到底部或右边会触发 scrolltolower 事件
1.纵向滚动
设置scroll-ytrue 开启纵向滚动功能
viewscroll-view :scroll-topscrollTop scroll-ytrue classscroll-Y scrolltoupperupper scrolltolowerlower scrollscrollview iddemo1 classscroll-view-item uni-bg-redA/viewview iddemo2 classscroll-view-item uni-bg-greenB/viewview iddemo3 classscroll-view-item uni-bg-blueC/view/scroll-view/view
2.横向滚动
设置scroll-xtrue 开启横向滚动功能
viewscroll-view :scroll-topscrollTop scroll-xtrue classscroll-Y scrolltoupperupper scrolltolowerlower scrollscrollview iddemo1 classscroll-view-item uni-bg-redA/viewview iddemo2 classscroll-view-item uni-bg-greenB/viewview iddemo3 classscroll-view-item uni-bg-blueC/view/scroll-view/view 注意scroll-view本身的display:flex不生效、如果想实现displayflex功能则可以给scroll-view加上white-space: nowrap给内容容器加上display:inline-block
3.触底事件
scrolltolower 滚动到底部或右边会触发 scrolltolower 事件
templateviewscroll-view scroll-ytrue styleheight: 500rpx; scrolltoloweronReachScollBottom/scroll-view/view
/template
scriptexport default {data() {return {}},methods: {onReachScollBottom(){uni.showToast({title:触发了触底事件,duration:1500,icon:none})}}}
/scriptstyle/style
4.下拉刷新
refresher-enabled true 开启自定义下拉刷新
refresher-triggered true 设置当前下拉刷新状态true 表示下拉刷新已经被触发false 表示下 拉刷新未被触发
refresherrefresh 自定义下拉刷新被触发 templateviewscroll-view scroll-ytrue styleheight: 500rpx; refresher-enabledtrue :refresher-triggeredrefresh refresherrefreshonRefresh/scroll-view/view
/templatescriptexport default {data() {return {colorList:[blue,red,yellow],refresh: false}},methods: {onRefresh() {this.refresh true;uni.showToast({title:触发了下拉刷新,duration:1500,icon:none})// 这里不能直接让refresh直接为false否则可能会发生下拉加载无法复位的情况setTimeout(() {this.refresh false;}, 500)}}}
/script
