uniapp scroll-view基础用法和示例
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
前言
在uniapp日常开发的过程中经常会有局部滚动的需求,而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。
纵向滚动
将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能,给scroll-view设置一个高度,当内容高度大于scroll-view高度时即可开启滚动功能(内容高度小于scroll-view高度时无法体现滚动功能)
实现代码:
<template> <view> <scroll-view scroll-y="true" style="height: 700rpx;"> <view v-for="(item,index) in 3" style="height: 500rpx;" :style="{ backgroundColor: colorList[index]}"> {{index}} </view> </scroll-view> </view> </template> <script> export default { data() { return { colorList:["blue","red","yellow"] } }, methods: { } } </script> <style> </style>
效果图:
横向滚动
将scroll-view组件中的属性scroll-x设定为true开启横向滚动功能,给scroll-view设置一个宽度,当内容宽度大于scroll-view宽度时即可开启滚动功能(内容宽度小于scroll-view宽度时无法体现滚动功能)
注意:scroll-view本身的display:flex不生效、如果想实现display:flex功能,则可以给scroll-view加上white-space: nowrap,给内容容器加上display:inline-block
实现代码:
<template> <view> <scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;"> <view v-for="(item,index) in 3" style="height: 500rpx;width: 100%;display: inline-block;" :style="{ backgroundColor: colorList[index]}"> {{index}} </view> </scroll-view> </view> </template> <script> export default { data() { return { colorList:["blue","red","yellow"] } }, methods: { } } </script> <style> </style>
效果图:
锚点定位
当我们已进入页面就需要滚动到某一个元素的时候,锚点定位就可以很好的帮助我们定位并滚动到指定位置
将scroll-with-animation设定为true开启动画效果、对scroll-into-view进行动态绑定
注意:scroll-into-view绑定的值得是字符串,使用其他类型则会报错
实现代码:
<template> <view> <scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId"> <view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}" :id="'scroll'+index"> {{index}} </view> </scroll-view> </view> </template> <script> export default { data() { return { colorList:["blue","red","yellow"], scrollId:1 } }, methods: { } } </script> <style> </style>
效果图:
触底事件
在滑动的数据需要懒加载的时候,我们就需要通过用户滑动到底部时触发懒加载方法,通过绑定scrolltolower方法即可实现纵/横触底时触发懒加载方法
实现代码:
<template> <view> <scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" @scrolltolower="onReachScollBottom"> <view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}"> {{index}} </view> </scroll-view> </view> </template> <script> export default { data() { return { colorList:["blue","red","yellow"], } }, methods: { onReachScollBottom(){ uni.showToast({ title:"触发了触底事件", duration:1500, icon:"none" }) } } } </script> <style> </style>
效果图:
下拉刷新事件
scroll-view组件也可以满足我们下拉刷新的需求、首先通过设置refresher-enabled为true开启下拉加载、动态绑定refresher-triggered对下拉加载的状态进行控制、绑定refresherrefresh触发下拉刷新事件
实现代码:
<template> <view> <scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh"> <view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}"> {{index}} </view> </scroll-view> </view> </template> <script> export 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> <style> </style>
效果图:
总结
以上就是我整理的scroll-view的基础用法、想要了解更多的用法可以前往uniapp scroll-view部分进行了解
到此这篇关于uniapp scroll-view基础用法和示例的文章就介绍到这了,更多相关uniapp scroll-view用法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!
相关文章
- 这篇文章主要介绍了uniapp+Html5端实现PC端适配,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2020-07-15
最新评论