小程序scroll-view组件实现滚动的示例代码
前言:这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动。
GitHub: https://github.com/Ewall1106/miniProgramDemo
1、竖向滚动
首先从简单的来,竖向滚动很简单,只用记住两点即可:
首先得设置 scroll-y
属性; 其次,一定要给 scroll-view
设置一个 height
高度;
<scroll-view scroll-y style="height: 200px;"> <view class="green" style="width: 100%; height: 200px; background: green;"></view> <view class="red" style="width: 100%; height: 200px; background: red;"></view> <view class="yellow" style="width: 100%; height: 200px; background: yellow;"></view> <view class="blue" style="width: 100%; height: 200px; background: blue;"></view> </scroll-view>
就这样我们就实现了竖向滚动:
竖向滚动
2、横向滚动
横向滚动就有点坑了...
- 首先还是要设置滚动方向为
scroll-x
; - 然后要给
<scroll-view></scroll-view>
设置white-space
为nowrap
不换行; - 最后需要将容器中包裹的标签的
display
属性设置为inline-block
。
横向滚动
<scroll-view scroll-x style="width: 100%; white-space: nowrap;"> <view class="green" style="display: inline-block; width: 200px; height: 200px; background: green;"></view> <view class="red" style="display: inline-block; width: 200px; height: 200px; background: red;"></view> <view class="yellow" style="display: inline-block; width: 200px; height: 200px; background: yellow;"></view> <view class="blue" style="display: inline-block; width: 200px; height: 200px; background: blue;"></view> </scroll-view>
就这样我们就实现了横向滚动的一个基本效果:
横向滚动
3、其它
(1)当然,关于scroll-view组件 官网还提供了许多其它的属性和事件方法,大家仔细去看看:
部分截图来自小程序官网
如何设置scroll-view满屏滚动
文档中说到:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。
那么我们想让小程序满屏滚动该如何设置高度呢,直接设置height:100%?好像不是很好用,原因是因为这个高度没有参照物,以前我们是设置body的高度,类似,我们这里发现小程序页面渲染出来的容器是Page,那我们就先设置Page的高度100%,再设置scroll-view高度100%,问题得到解决。
官方推荐的loading效果
onLoad:function(options){ wx.showToast({ title: '加载中', icon: 'loading', duration: 10000//loading时间 }); //wx.hideToast();隐藏loading }
参考学习 :https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript与jquery中的this关键字用法实例分析
这篇文章主要介绍了javascript与jquery中的this关键字用法,结合实例形式简单分析了this关键字用于获取当前对象的使用技巧,非常简单易懂,需要的朋友可以参考下2015-12-12JavaScript中for与forEach分别如何跳出循环
forEach的优势一个是它的回调函数形成了一个作用域,它的curItem和i不会像for循环一样污染全局变量,这篇文章主要给大家介绍了关于JavaScript中for与forEach分别如何跳出循环的相关资料,需要的朋友可以参考下2024-01-01JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
这篇文章主要介绍了JSON在Javascript中的使用以及eval和JSON.parse的区别详细解析,本文对eval()和JSON.parse()的区别介绍的非常详细,需要的朋友可以参考下2017-09-09
最新评论