经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
小程序scroll-view组件实现滚动的示例代码
来源:jb51  时间:2018/9/25 19:02:54  对本文有异议

前言:这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动。

GitHub: https://github.com/Ewall1106/miniProgramDemo

1、竖向滚动

首先从简单的来,竖向滚动很简单,只用记住两点即可:

首先得设置 scroll-y 属性; 其次,一定要给 scroll-view 设置一个 height 高度;

  1. <scroll-view scroll-y style="height: 200px;">
  2. <view class="green" style="width: 100%; height: 200px; background: green;"></view>
  3. <view class="red" style="width: 100%; height: 200px; background: red;"></view>
  4. <view class="yellow" style="width: 100%; height: 200px; background: yellow;"></view>
  5. <view class="blue" style="width: 100%; height: 200px; background: blue;"></view>
  6. </scroll-view>

就这样我们就实现了竖向滚动:

竖向滚动

2、横向滚动

横向滚动就有点坑了...

  • 首先还是要设置滚动方向为 scroll-x
  • 然后要给 <scroll-view></scroll-view> 设置 white-spacenowrap 不换行;
  • 最后需要将容器中包裹的标签的 display 属性设置为 inline-block

横向滚动

  1. <scroll-view scroll-x style="width: 100%; white-space: nowrap;">
  2. <view class="green" style="display: inline-block; width: 200px; height: 200px; background: green;"></view>
  3. <view class="red" style="display: inline-block; width: 200px; height: 200px; background: red;"></view>
  4. <view class="yellow" style="display: inline-block; width: 200px; height: 200px; background: yellow;"></view>
  5. <view class="blue" style="display: inline-block; width: 200px; height: 200px; background: blue;"></view>
  6. </scroll-view>

就这样我们就实现了横向滚动的一个基本效果:

横向滚动

3、其它

(1)当然,关于scroll-view组件 官网还提供了许多其它的属性和事件方法,大家仔细去看看:

部分截图来自小程序官网

如何设置scroll-view满屏滚动

文档中说到:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

那么我们想让小程序满屏滚动该如何设置高度呢,直接设置height:100%?好像不是很好用,原因是因为这个高度没有参照物,以前我们是设置body的高度,类似,我们这里发现小程序页面渲染出来的容器是Page,那我们就先设置Page的高度100%,再设置scroll-view高度100%,问题得到解决。

官方推荐的loading效果

  1. onLoad:function(options){
  2. wx.showToast({
  3. title: '加载中',
  4. icon: 'loading',
  5. duration: 10000//loading时间
  6. });
  7. //wx.hideToast();隐藏loading
  8. }

参考学习https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号